Switch

Form
v1.0.0
stable

A toggle switch component for binary choices.

Preview

npx inam-ui add switch

Usage Examples

Settings Toggle

Use for binary on/off settings

<Switch 
  label="Enable Notifications" 
  checked={enabled} 
  onChange={setEnabled} 
/>

Accessibility

Keyboard Navigation

  • Space or Enter - Toggle switch state
  • Tab - Move focus

ARIA Labels

  • role='switch'
  • aria-checked

Screen Reader

Announces as 'switch' with label and state.

Props

NameTypeDefaultDescription
labelstringLabel text for the switch.
checkedbooleanfalseWhether the switch is on.
disabledbooleanfalseWhether the switch is disabled.
onChange(checked: boolean) => voidCallback when switch state changes.

Related Components