Switch
A toggle between on and off states. Visually similar to a checkbox but designed for immediate boolean settings. Built on Radix UI Switch.
With Label
Checked By Default
Pass defaultChecked to start in the on state (uncontrolled).
Disabled
Pass disabled to prevent interaction.
Settings Example
Switches used in a labeled settings layout with descriptions.
Receive emails about new products.
Receive emails about account activity.
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state. |
onCheckedChange | (checked: boolean) => void | — | Callback when checked state changes. |
defaultChecked | boolean | false | Uncontrolled default state. |
disabled | boolean | false | Prevents interaction. |
required | boolean | — | Marks as required in a form. |