Switch
An on or off setting that applies at once, with no submit.
In Multi-brand
See it live
Start Storybook to see it live:
npm run storybookWhen to use it
In Multi-brand: Account settings.
- Use it when: A setting that should take effect as soon as it is flipped.
- Not when: A choice that waits for a form (checkbox).
Instead:
Words
- Shared structure: object, state, next step.
- Brand tone lives in headlines and marketing copy, not in errors.
- Errors and confirmations read the same in every brand.
- Use: Get started, Plan, Order. Avoid: Brand-specific words in errors, Jargon.
The labels components use, from the voice tokens:
content.action.commit: Savecontent.action.cancel: Cancelcontent.action.destroy: Removecontent.action.retry: Try againcontent.action.empty-action: Get started
See Voice and tone for the whole voice.
Accessibility and keyboard
| Keyboard | What happens | Not |
|---|---|---|
| undefined | Space flips it. | undefined |
Test before you ship:
- It is a switch with a visible label; on and off are announced. undefined
Use it in code
npx open-ds add switch
The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.
Tokens it reads
Switch reads 15 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Switch's tokens to change Switch alone.
Changes with theme
Multi-brand decides what changes when you switch theme. Here a switch changes colors, type and shape, so the marked rows differ between its brands and between light and dark; everything else holds steady.
| Part | Its token and the semantic it aliases | Value |
|---|---|---|
| Shared | ||
| Button focus ring Changes with theme on focus | component.button.focus-ringcolor.border.focusvar(--button-focus-ring) | Aster Lightteal.light.600:#0F766EAster Darkteal.dark.600:#7FCFC6Birch Lightpurple.light.600:#6D28D9Birch Darkpurple.dark.600:#B79DF7Coral Lightorange.light.600:#C2410CCoral Darkorange.dark.600:#F7A67F |
| Control checked Changes with theme when on | component.control.checkedcolor.action.primaryvar(--control-checked) | Aster Lightteal.light.600:#0F766EAster Darkteal.dark.600:#7FCFC6Birch Lightpurple.light.600:#6D28D9Birch Darkpurple.dark.600:#B79DF7Coral Lightorange.light.600:#C2410CCoral Darkorange.dark.600:#F7A67F |
| Control track Changes with theme | component.control.trackcolor.border.strongvar(--control-track) | Aster Lightslate-deep.light.500:#64748BAster Darkslate-deep.dark.400:#96A3B5Birch Lightslate-deep.light.500:#64748BBirch Darkslate-deep.dark.400:#96A3B5Coral Lightslate-deep.light.500:#64748BCoral Darkslate-deep.dark.400:#96A3B5 |
| Control thumb Changes with theme | component.control.thumbcolor.surface.defaultvar(--control-thumb) | Aster Lightslate-deep.light.0:#FFFFFFAster Darkslate-deep.dark.50:#0F172ABirch Lightslate-deep.light.0:#FFFFFFBirch Darkslate-deep.dark.50:#0F172ACoral Lightslate-deep.light.0:#FFFFFFCoral Darkslate-deep.dark.50:#0F172A |
| Transition duration | component.transition.durationmotion.duration.feedbackvar(--transition-duration) | duration.moderate:200ms |
| Transition easing | component.transition.easingmotion.easing.standardvar(--transition-easing) | easing.standard:cubic-bezier(0.2,0,0,1) |
| Switch | ||
| Height | component.switch.heightsize.iconvar(--switch-height) | size.16:1rem |
| Width | component.switch.widthsize.iconvar(--switch-width) | size.16:1rem |
| Corner | component.switch.radiusradius.roundvar(--switch-radius) | radius.full:9999px |
| Padding | component.switch.paddingcomponent-spacing-map.hairlinevar(--switch-padding) | space.2:0.125rem |
| Focus on focus | component.switch.focusborder-width.focusvar(--switch-focus) | border-width.2:2px |
| Disabled when disabled | component.switch.disabledopacity.disabledvar(--switch-disabled) | opacity.40:0.4 |
| Canvas Changes with theme on focus | component.switch.canvascolor.surface.canvasvar(--switch-canvas) | Aster Lightslate-deep.light.50:#F8FAFCAster Darkslate-deep.dark.0:#020617Birch Lightslate-deep.light.50:#F8FAFCBirch Darkslate-deep.dark.0:#020617Coral Lightslate-deep.light.50:#F8FAFCCoral Darkslate-deep.dark.0:#020617 |
| Size | component.switch.sizesize.iconvar(--switch-size) | size.16:1rem |
| Icon when on | component.switch.iconsize.iconvar(--switch-icon) | size.16:1rem |