Switch

Toggle switch built on Radix UI Switch. Ideal for binary on/off settings such as enabling features or toggling modes.

Basic

Preview

Default Checked

Preview

Props

PropTypeDefaultDescription
labelstring-Label text displayed next to the switch.
defaultCheckedbooleanfalseDefault checked state for uncontrolled usage.
checkedboolean-Controlled checked state.
onCheckedChange(checked: boolean) => void-Callback fired when the checked state changes.
disabledbooleanfalseWhether the switch is disabled.
classNamestring-Additional CSS classes.

Accessibility

  • Built on Radix UI Switch which provides full WAI-ARIA switch role compliance
  • Label is associated with the switch for screen reader support
  • Togglable via Space key when focused
  • On/off state is conveyed to assistive technology via aria-checked
  • Disabled state prevents interaction and is communicated to assistive technology