Switch
A toggle switch for binary on/off states.
Import
Usage
Colors
Sizes
Disabled
Default Checked
Controlled
Form Usage
Custom Styling
Data Attributes
- -
data-slot="switch"Main switch element identifier - -
data-slot="switch-thumb"Switch thumb/circle element identifier - -
data-state="checked"Present when the switch is on - -
data-state="unchecked"Present when the switch is off
Accessibility
Keyboard Support
- -
SpaceToggles the switch on/off - -
EnterToggles the switch on/off - -
TabMoves focus to the next focusable element
ARIA Attributes
- -
role="switch"Identifies the element as a switch - -
aria-checkedIndicates the current state (true/false) - -
aria-disabledSet when the switch is disabled - -
aria-labelRequired to provide context for screen readers
Switch Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'primary' | The color scheme of the switch. |
| size | 'sm' | 'md' | 'lg' | 'md' | The size of the switch. |
| checked | boolean | - | The controlled checked state of the switch. |
| defaultChecked | boolean | - | The default checked state (uncontrolled). |
| onCheckedChange | (checked: boolean) => void | - | Callback when the checked state changes. |
| disabled | boolean | false | Whether the switch is disabled. |
| required | boolean | false | Whether the switch is required in a form. |
| name | string | - | The name of the switch for form submission. |
| value | string | 'on' | The value of the switch for form submission. |
| className | string | - | Additional CSS classes for the switch container. |
| thumbClassName | string | - | Additional CSS classes for the switch thumb. |
