Switch
A toggle switch built from a hidden <input type="checkbox">, a clickable track, and a sliding thumb. Supports label, description, error message, and all the same size/color options as Checkbox.
Default
<Switch label="Enable notifications" />States
<Switch label="Default (off)" />
<Switch label="Checked (on)" checked />
<Switch label="Disabled" disabled />
<Switch label="Disabled on" disabled checked />With description and error
Changes the color scheme to dark.
This feature is not available on your plan.
<Switch
label="Dark mode"
description="Changes the color scheme to dark."
/>
<Switch
label="Experimental feature"
error="This feature is not available on your plan."
/>Sizes
<Switch size="xs" label="xs" />
<Switch size="sm" label="sm" />
<Switch size="md" label="md" />
<Switch size="lg" label="lg" />
<Switch size="xl" label="xl" />Colors
<Switch label="Blue" color="blue" checked />
<Switch label="Green" color="green" checked />Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Associates label with switch via HTML for/id |
label | ReactNode | — | Clickable label beside the switch track |
description | ReactNode | — | Helper text below the label |
error | ReactNode|boolean | — | Error message; pass true for styles only |
checked | boolean | — | On/checked state (SSR snapshot) |
defaultChecked | boolean | — | On by default without controlling subsequent state |
disabled | boolean | — | Disables the switch |
required | boolean | — | Marks the underlying checkbox as required |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Controls the overall size of the switch |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border-radius of the track |
color | string | — | Fill color of the track when on |
labelPosition | 'right'|'left' | 'right' | Side on which the label is placed |
name | string | — | Form field name |
value | string | — | Value submitted when the switch is on |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |