Geist Design System

Switch

Choose between a set of options.

Default

Ensure the width of each item is wide enough to prevent jumping when active.

Disabled

Sizes

Full width

Tooltip

Icon

Best Practices
  • Use Switch as a segmented selector for 2–3 mutually exclusive options that show different views of the same surface, like Source vs Output.
  • For a boolean on/off setting, use Toggle. Switch implements radio semantics, so two options stay mutually exclusive rather than reading as a checkbox.
  • Past 3 options or when labels grow beyond a couple of words, switch to Tabs or a Select.
  • Pass a name so the underlying radios are grouped; without it, more than one option can appear selected at once.
  • Set defaultChecked (or controlled checked) on exactly one Switch.Control so the group has a defined initial state.
  • Pad each Switch.Control so the widest label fits without the active pill resizing on selection. Test with the longest copy in the set.
  • Title Case each Switch.Control label. Keep labels to one or two words and parallel: Source / Output, not Source / Show output.
  • Always provide a label on every Switch.Control, even when an icon carries the meaning, so screen readers announce the option. The component renders it as geist-sr-only for icon-only controls.
  • Pair an icon-only Switch with a Tooltip on each control so sighted users get the same label assistive tech receives.