ComponentsForm
Switch
An accessible toggle switch for boolean settings. Built on Radix UI.
Default
Sizes
Checked
Disabled
Installation
npx visor add switchThis copies two files into your project:
components/ui/switch/switch.tsx— the componentcomponents/ui/switch/switch.module.css— the styles
Usage
import { Switch } from '@/components/ui/switch/switch';
import { Label } from '@/components/ui/label/label';
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<Switch id="airplane" />
<Label htmlFor="airplane">Airplane mode</Label>
</div>API Reference
SwitchProps
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state. |
defaultChecked | boolean | — | Default checked state for uncontrolled usage. |
onCheckedChange | (checked: boolean) => void | — | Callback when the checked state changes. |
size | 'default' | 'sm' | 'default' | Size of the switch. |
disabled | boolean | false | Disables the switch. |
className | string | — | Additional CSS class names to merge onto the element. |
The component also accepts all standard <button> HTML attributes (Radix renders switch as a button).
Accessibility
- Built on
@radix-ui/react-switchwith full WAI-ARIA switch semantics - Renders with
role="switch"andaria-checkedreflecting the current state - Always pair with a
<Label>using matchingid/htmlFor— the label text communicates what the switch controls - Keyboard: Space or Enter toggles the switch; Tab moves focus to/from it
- Use past-tense or noun labels ("Notifications", "Dark mode") rather than action labels ("Enable notifications")