Switch

The Switch component is the preferred way to display a boolean value.

---

import dash
from dash import html, Input, Output, callback
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        dmc.Box(
            sx={'display': 'flex', 'flexDirection': 'column', 'gap': '16px', 'padding': 4},
            children=[
                # Basic Switch with label
    dmc.Switch(
        id='basic-switch',
        label='Basic Switch',
        value=False
    ),

    # Colored Switch with custom size
    dmc.Switch(
        id='colored-switch',
        label='Colored Switch',
        color='secondary',
        size='small',
        value=True
    ),

    # Disabled Switch
    dmc.Switch(
        id='disabled-switch',
        label='Disabled Switch',
        disabled=True,
        value=False
    ),

    # Switch with custom styling
    dmc.Switch(
        id='custom-switch',
                    label="Custom Styled Switch",
                    sx={"marginTop": "1rem"},
                    labelSx={"color": "purple"},
                    value=False,
                ),
            ],
        ),

        # Display area for switch states
        html.Div(id='switch-output', style={'marginTop': '20px'})
    ],
)

# Callback to demonstrate switch interaction
@app.callback(
    Output('switch-output', 'children'),
    Input('basic-switch', 'value')
)
def update_output(checked):
    return f"Switch is {'ON' if checked else 'OFF'}"

if __name__ == "__main__":
    app.run_server(debug=True)

---

Props Table

Below are the main props available for the Switch component:

Prop	Type	Default	Description
id	string	null	Unique ID for Dash callbacks.
checked	boolean	false	Whether the switch is checked/on.
color	string	'primary'	Color of the switch.
disabled	boolean	false	If true, the switch is disabled.
label	string	null	Label of the switch.
labelSx	SxProps	null	Style of the label.

---

For the full list of props, refer to the official MUI documentation, as these components are based on MUI:

MUI Switch Documentation