Switch

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Toggle a setting that applies immediately. The thumb position and background change together. The label stays the same in both states. In read-only mode, the value is visible but can't change.

Don't use it in place of an action button. Use Button instead. Don't use it for a multi-select list. Use CheckboxGroup instead.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

ChoiceLabel(control) → Switch.Root + Thumb + stable label

Keyboard and accessibility

Tab focuses the switch. Space toggles it. In forms, the name, value, and uncheckedValue props submit explicit values.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { ChoiceLabel, Switch } from '@surflane/ui'

<ChoiceLabel
  control={
    <Switch.Root
      name='refresh'
      defaultChecked
      value='enabled'
      uncheckedValue='disabled'
    >
      <Switch.Thumb />
    </Switch.Root>
  }
>
  Refresh run status
</ChoiceLabel>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens