Forms

Switch

A switch you slide on and off. It works by keyboard, and screen readers announce its state.

ReactVueWeb Components
View in Storybook

Playground

Examples

<Switch label="Enable notifications" checked={on} onChange={…} />

Props

Name Type Default Description
label ReactNode Inline label shown next to the switch.

Accessibility

  • Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
  • Every interaction works with the keyboard alone.
  • The focus ring is always visible.
  • Respects prefers-reduced-motion and stops excessive motion.

Every component is designed to meet WCAG 2.1 AAA.