Switch

forms

Toggle switch with pill track, sliding thumb, label, disabled state, keyboard support (Space/Enter), focus ring, and role=switch with aria-checked. Animated on/off transitions.

Import

typescript
import { Switch } from "packages/ui/src";

Props

SwitchProps

PropTypeRequired
checkedbooleanNo
onChange(checked: boolean) => void, label?: string, disabled?: booleanNo

Examples

Switch

Toggle switch with label, disabled state, keyboard support, and focus ring.

Interactive

States

Settings Panel

Preferences

Email digest

Weekly summary of activity

Auto-save

Save drafts every 30 seconds

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionToggle switch with pill track, sliding thumb, label, disabled state, keyboard support (Space/Enter), focus ring, and role=switch with aria-checked. Animated on/off transitions.
PropsSwitchProps (checked?: boolean, onChange?: (checked: boolean) => void, label?: string, disabled?: boolean)
Statesoff, on, disabled-off, disabled-on, focus-visible
A11y
  • role=switch with aria-checked
  • aria-disabled when disabled
  • Keyboard toggle via Space and Enter
  • Focus ring on keyboard navigation
Responsive
  • Fixed track size from tokens
  • Label wraps naturally
Motion
  • Thumb slides with transition
  • Track background fades
Token Dependencies
  • components.switch.trackWidth
  • components.switch.trackHeight
  • components.switch.trackBorderRadius
  • components.switch.trackOffBackground
  • components.switch.trackOnBackground
  • components.switch.trackDisabledBackground
  • components.switch.thumbSize
  • components.switch.thumbColor
  • components.switch.thumbOffset
  • components.switch.labelColor
  • components.switch.labelFontSize
  • components.switch.labelGap
  • components.switch.animationDuration
  • components.switch.focusRing
Content Slotslabel (string — optional descriptive text)
CMS Bindings
  • Toggle label from CMS field
  • Default state from CMS boolean
Test Cases
  • Renders unchecked by default
  • Renders checked state
  • Toggles on click
  • Shows label text
  • Disabled prevents toggle
  • Has role=switch
  • Has aria-checked
  • Passes className through