Switch
A toggle that turns a single setting on or off right away, like enabling a feature, with a sliding thumb that shows its current state.
Base UI
Shadcn UIInstallation
bash
npx shadcn@latest add @redpanda/switchbash
pnpm dlx shadcn@latest add @redpanda/switchbash
yarn dlx shadcn@latest add @redpanda/switchbash
bunx shadcn@latest add @redpanda/switchbash
nubx shadcn@latest add @redpanda/switchbash
aube dlx shadcn@latest add @redpanda/switchDisabled
When to use
Switches provide binary toggle controls. Use this decision tree:
Usage
tsx
<Switch />Props
Examples
Default
Advanced Label
Card style
Settings panel
Form
Keyboard interactions
| Key | Action |
|---|---|
Tab to the switch |
Focus lands on the switch. |
Space |
Toggles checked state. |
Enter |
Submits the surrounding form — does not toggle the switch (Space is the dedicated toggle key). |
Accessibility
- Base UI renders the switch as a real
<button role="switch">witharia-checked. It also sets the Radix-compatdata-state="checked" | "unchecked"attribute so existing selectors keep working. - Always pair with a visible
<Label htmlFor>— switches without labels are ambiguous (“on for what?”). - Use a switch for immediate-effect binary settings (notifications on/off, theme toggle). For binary form values
submitted alongside other fields prefer a
Checkbox— its ARIA semantics are better understood by assistive tech. onCheckedChangeis the Radix-style single-argument(checked: boolean) => void.