Switch
Preview appears after the next Storybook update.
<Switch />When to use
Use it for
- Settings that apply as soon as they are flipped: notifications, auto-publish, preview mode.
- labelPlacement start in settings lists, so labels align left and switches align right.
Not for
- A choice saved later with a form button: use Checkbox.
- More than two states: use RadioGroup or Select.
- Starting an action (Publish, Sync): use Button.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Name the setting, not the state
The switch shows on or off; the label says what is on or off.
Labels that change with the state
"On" and "Off" labels repeat what the control already shows and hide what it controls.
A switch that waits for Save
Users expect a switch to act at once. Inside a form that saves later, use a Checkbox.
Accessibility
- Base UI Switch: role switch with aria-checked; Space and Enter toggle it; the label row is the click target.
- The off track uses control.track (3:1 against surfaces) and the thumb keeps 3:1 against the track, so the state is visible without color.
- The thumb position carries the state, not only the track color.
- If flipping it fails (network), revert it and say why next to it.
Content guidelines
- Noun phrase in sentence case: "Review requests", "Auto-publish approved tokens".
- Put consequences in the description, one short sentence.
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/Switch/Switch.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Label row (click target)
.item - Size sm
.sm - Track
.track - Track
.track[data-checked] - Label row (click target), hover
@media (hover: hover) .item:hover .track[data-unchecked]:not([data-disabled]) - Label row (click target), hover
@media (hover: hover) .item:hover .track[data-checked]:not([data-disabled]) - Track, focus
.track:focus-visible - Thumb
.thumb - Thumb
.thumb[data-checked] - text
.text - Description
.description - Label row (click target)
.item:has([data-disabled]) - Label row (click target)
.item:has([data-disabled]) .description - Track
.track[data-disabled] - Track
.track[data-disabled][data-checked]
Motion and interaction
Switch animates on hover, check and uncheck. Try it in the preview at the top.
| When | What changes | Duration | Easing |
|---|---|---|---|
| Hover | Background | motion.duration.fast150 ms | motion.easing.standardsettles in place |
| Check and uncheck | Background and movement | motion.duration.fast150 ms | motion.easing.standardsettles in place |
With reduced motion turned on, every change happens at once.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/Switch/Switch.tsx, so this table cannot drift from the code.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | ReactNode | none | Visible label. Name the setting, not the state: "Email notifications", not "On". |
description | ReactNode | none | Secondary text under the label, linked with aria-describedby. |
checked | boolean | none | No description in the code yet. |
defaultChecked | boolean | none | No description in the code yet. |
onCheckedChange | (checked: boolean) => void | none | No description in the code yet. |
labelPlacement | 'end' | 'start' | 'end' | `end` puts the label after the switch; `start` puts it first and pushes the switch to the row end (settings lists). Default `end`. |
size | 'sm' | 'md' | 'md' | Default `md` (36 by 20). `sm` (28 by 16) for dense tables. |
name | string | none | No description in the code yet. |
value | string | none | No description in the code yet. |
disabled | boolean | none | No description in the code yet. |
readOnly | boolean | none | No description in the code yet. |
required | boolean | none | No description in the code yet. |
id | string | none | No description in the code yet. |
className | string | none | No description in the code yet. |
Playground
Change the props and see the real Switch update. Controls are generated from the TypeScript props; nothing here changes the system.
<Switch defaultChecked label="Auto-publish approved tokens" />Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Switch in Storybook).
Embed Storybook stories here (5)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Default
On
WithDescription
SettingsRow
AllStates
From the code Generated from the component, not editable here.
Changelog
- New
Try it works without online previews: when nothing reported a deployment for an exploration (explorations and library branches are not deployed on Vercel any more), the Figma plugin says a developer opens it on their computer, the share message gives
git fetch origin && git switch <branch>, polling stops, andbridge branch try/ bridge_try_branch return the same local command (local)v1.0.0, Nov 11, 2026
- New
One GitHub App, for good: Bridge Direct signs everyone in on every page, and the
BRIDGE_ONE_APPswitch, the older second app (bridge-ds,GITHUB_APP_SUGGEST_*), its "Allow Bridge to save your changes" second OK and its install links are gonev1.0.0, Nov 11, 2026
- New
Library and Studio headers: one switch replaces the "Open Studio" and "Library" buttons
v1.0.0, Nov 11, 2026
- Fix
Component specs for Figma: a content-box min-height or min-width counts its padding and border, as CSS draws it (checkbox, radio, switch, link rows were 3px short in Figma)
v1.0.0, Nov 11, 2026
- Fix
Someone who joined by email goes to their own team's Studio: the Library <-> Studio switch, the Library's Studio links and /studio itself lead there, never to the read-only showcase
v1.0.0, Nov 11, 2026
- Fix
Studio shows the theme switch in the top bar again, in the same place as the Library, instead of hiding it in the account menu
v1.0.0, Nov 11, 2026
- Fix
Settings, once connected, is one card: the design system by its name and how this computer is connected, with a few actions. - Signed in with Bridge: "Connected with Bridge as <name>", with Open in Studio, Switch design system (reopens the team pick in Studio) and Sign out. - A token pasted before Sign in with Bridge existed: the same card, with one primary action, "Sign in with Bridge" ("Connect through your team's Bridge account
v1.0.0, Nov 11, 2026