DocsSwitch
Switch
A control that allows the user to toggle between checked and unchecked states.
On This Page
A control that allows the user to toggle between checked and unchecked states.
A control that allows the user to toggle between checked and unchecked states.
toggle switchImmediate state changes (dark mode toggle, push notifications, wifi settings)checkbox (alternative)Standard multi-select forms where actions are not applied instantly (requires a Submit button click)Receive real-time alerts in this browser.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | Controlled checked state of the switch toggle. |
| defaultChecked | boolean | false | Default initial checked state. |
| onCheckedChange | (checked: boolean) => void | — | Callback triggered when the checked state changes. |
| disabled | boolean | false | Disables interaction and visually mutes the switch. |
| name | string | — | Name of the input field for HTML forms integration. |
| value | string | — | Value of the switch input element. |
| className | string | — | Additional custom class names. |
role="switch" and maps the state visually to screen readers via aria-checked.