Switch
ARIA
RTL
Switch is a control that is used to quickly switch between two possible states.
Switches are only used for these binary actions that occur immediately after the user “flips” the switch.
They are commonly used for “on/off” switches.
Based on Headless UI.
Default
Sizes
Disabled
With icons
Custom background colour
Using with HTML forms
Code examples for full customization
Switch props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| checked | boolean | No | false | Is switch checked/unchecked. |
| disabled | boolean | No | _ | Set disabled/not disabled switch |
| name | string | No | - | The name used when using this component inside a form. |
| offBgColor | string | No | bg-beerus | Tailwind class for custom off-state background color |
| offIcon | JSX.Element | string | No | - | Set icon for unchecked state |
| onBgColor | string | No | bg-piccolo | Tailwind class for custom on-state background color |
| onChange | (data) => void | No | - | The function to call when the switch is toggled. |
| onIcon | JSX.Element | string | No | - | Set icon for checked state |
| size | 2xs | xs | sm | No | sm | The option's value. |
| value | string | No | - | The value used when using this component inside a form, if it is checked. |