Forms
Switch
A toggle for settings that take effect immediately, built on Radix Switch.
- Source
- src/components/ui/switch.tsx
- Figma
- Switch · state (off, on, disabled)
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { Switch } from "@/components/ui/switch";When to use
- Settings that apply as soon as they change, such as notifications or dark mode.
- Turning a feature on or off in a settings list.
- For options submitted later with a form, use Checkbox.
- For choosing between two named options (Monthly, Yearly), use a segmented control or radio group.
Examples
States
Off, on and disabled.
Controlled
Hold the state yourself with checked and onCheckedChange.
Settings list
A common layout: title and description on the left, switch on the right.
API reference
Switch
Extends Radix Switch.Root props (id, name, value, required, aria-*).
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | - | Controlled state. |
| defaultChecked | boolean | - | Initial state when uncontrolled. |
| onCheckedChange | (checked: boolean) => void | - | Called on toggle. |
| disabled | boolean | - | Dims the switch and blocks interaction. |
| name | string | - | Submits the value with a surrounding form. |
Accessibility
- Radix renders a button with role="switch" and aria-checked, so screen readers announce it as on or off.
- Space and Enter toggle it.
- Name it with Label htmlFor pointing at the switch id, or pass aria-label.
- A visible focus ring appears on keyboard focus.