Components
Switch
A toggle switch for binary on/off states. Uses a hidden checkbox with role="switch" for accessibility.
Basic usage
With description
Automatically save changes every 30 seconds.
Sizes
Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text label rendered beside the switch. |
description | string | — | Secondary helper text below the label. |
size | 'sm' | 'md' | 'md' | Controls track and thumb size. |
...rest | InputHTMLAttributes | — | All native checkbox props (checked, onChange, disabled, etc.). |
Accessibility
- Uses
role="switch"for correct AT announcement. - Hidden checkbox receives focus — focus ring shown on track.
- Space and Enter toggle the state.
- Label is clickable and associated via
htmlFor.