Skip to main content

Switch

An on or off setting that applies at once, with no submit.

In Brand expressive

See it live​

Start Storybook to see it live: npm run storybook
Live from StorybookOpen Switch in StorybookSee it in dark

When to use it​

In Brand expressive: A setting that applies at once, such as drop news by email. Not inside the sign-up form; checkbox waits for it.

  • 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:

  • Checkbox: Waits for the form.
  • Toggle: A pressed button in a toolbar.

Words​

  • Headlines are short and bold. Three to six words.
  • Verbs that move: Join, Try, Go.
  • Playful in headlines, plain in errors.
  • Use: Join, Drop, Go, Love. Avoid: Synergy, Leverage, Kindly.

The labels components use, from the voice tokens:

  • content.action.commit: Go
  • content.action.cancel: Not now
  • content.action.destroy: Remove
  • content.action.retry: Try again
  • content.action.empty-action: Explore the drop

See Voice and tone for the whole voice.

Accessibility and keyboard​

KeyboardWhat happensNot
undefinedSpace 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

Brand expressive decides what changes when you switch theme. Here a switch changes colors only, so the marked rows differ between light and dark; everything else holds steady.

PartIts token and the semantic it aliasesValue
Shared
Button focus ring
Changes with theme
on focus		component.button.focus-ringcolor.border.focusvar(--button-focus-ring)Lightpink.light.600:#D61F7ADarkpink.dark.600:#F59ACA
Control checked
Changes with theme
when on		component.control.checkedcolor.action.primaryvar(--control-checked)Lightpink.light.600:#D61F7ADarkpink.dark.600:#F59ACA
Control track
Changes with theme		component.control.trackcolor.border.strongvar(--control-track)Lighttaupe.light.500:#8A6F63Darktaupe.dark.400:#B5988A
Control thumb
Changes with theme		component.control.thumbcolor.surface.defaultvar(--control-thumb)Lighttaupe.light.0:#FFFFFFDarktaupe.dark.50:#1F1411
Transition durationcomponent.transition.durationmotion.duration.feedbackvar(--transition-duration)duration.fast:120ms
Transition easingcomponent.transition.easingmotion.easing.standardvar(--transition-easing)easing.spring:cubic-bezier(0.34,1.56,0.64,1)
Switch
Heightcomponent.switch.heightsize.iconvar(--switch-height)size.20:1.25rem
Widthcomponent.switch.widthsize.iconvar(--switch-width)size.20:1.25rem
Cornercomponent.switch.radiusradius.roundvar(--switch-radius)radius.full:9999px
Paddingcomponent.switch.paddingcomponent-spacing-map.hairlinevar(--switch-padding)space.2:0.125rem
Focus
on focus		component.switch.focusborder-width.focusvar(--switch-focus)border-width.3:3px
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)Lighttaupe.light.50:#FFF8F3Darktaupe.dark.0:#120B09
Sizecomponent.switch.sizesize.iconvar(--switch-size)size.20:1.25rem
Icon
when on		component.switch.iconsize.iconvar(--switch-icon)size.20:1.25rem