## Switch  
Use the Switch component to capture boolean input from user.  
Category: Inputs  

### Introduction

### Callbacks

Use the property `checked` to use dmc.Switch in callbacks.

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, callback

component = html.Div(
    [
        dmc.Switch(id="switch-example", label="Use default settings.", checked=True),
        dmc.Space(h=10),
        dmc.Text(id="switch-settings"),
    ]
)


@callback(Output("switch-settings", "children"), Input("switch-example", "checked"))
def settings(checked):
    return f"Using {'default' if checked else 'custom'} settings"
```
### Inner Labels



```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Switch(onLabel="ON", offLabel="OFF", radius="xl", size=x)
        for x in ["xs", "sm", "md", "lg", "xl"]
    ]
)
```
### Radius and Size

Set the radius and size of the Switch component using the `radius` and `size` prop respectively.

```python
import dash_mantine_components as dmc

dmc.Switch(
    size="lg",
    radius="sm",
    label="Enable this option",
    checked=True
)
```

### Icon Labels

You can also add icons in the switch labels.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Switch(
    offLabel=DashIconify(icon="radix-icons:moon", width=20),
    onLabel=DashIconify(icon="radix-icons:sun", width=20),
    size="xl",
)
```
### Thumb Icon

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Switch(
    thumbIcon=DashIconify(
        icon="tabler:walk", width=16, color= "var(--mantine-color-teal-5)"
    ),
    size="lg",
    color="teal",
    checked=True,
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name         | Static selector              | Description                                     |
|:-------------|:-----------------------------|:------------------------------------------------|
| root         | .mantine-Switch-root         | Root element                                    |
| track        | .mantine-Switch-track        | Switch track, contains `thumb` and `trackLabel` |
| trackLabel   | .mantine-Switch-trackLabel   | Label displayed inside `track`                  |
| thumb        | .mantine-Switch-thumb        | Thumb displayed inside `track`                  |
| input        | .mantine-Switch-input        | Input element, hidden by default                |
| body         | .mantine-Switch-body         | Input body, contains all other elements         |
| labelWrapper | .mantine-Switch-labelWrapper | Contains `label`, `description` and `error`     |
| label        | .mantine-Switch-label        | Label element                                   |
| description  | .mantine-Switch-description  | Description displayed below the label           |
| error        | .mantine-Switch-error        | Error message displayed below the label         |


### Keyword Arguments
#### Switch

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- checked (boolean; optional):
    State of check box.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color to set input color in
    checked state, `theme.primaryColor` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- description (a list of or a singular dash component, string or number; optional):
    Description displayed below the label.

- disabled (boolean; optional):
    A checkbox can show it is currently unable to be interacted with.

- error (a list of or a singular dash component, string or number; optional):
    Error displayed below the label.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- label (a list of or a singular dash component, string or number; optional):
    Content of the `label` associated with the radio.

- labelPosition (a value equal to: 'left', 'right'; optional):
    Position of the label relative to the input, `'right'` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- offLabel (a list of or a singular dash component, string or number; optional):
    Inner label when the `Switch` is in unchecked state.

- onLabel (a list of or a singular dash component, string or number; optional):
    Inner label when the `Switch` is in checked state.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius,` "xl" by default.

- size (optional):
    Controls size of all elements.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- thumbIcon (a list of or a singular dash component, string or number; optional):
    Icon inside the thumb of the switch.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withThumbIndicator (boolean; optional):
    If set, the indicator will be displayed inside thumb, `True` by
    default.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.