Switch

Binary toggle control. The thumb slides along a spring curve, with a slight stretch on press for a tactile feel.

Basic Usage

import { Switch } from '@airo-ui/react'
import { useState } from 'react'

function Demo() {
  const [on, setOn] = useState(true)

  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Switch checked={on} onChange={setOn} />
      <Switch />
    </div>
  )
}

Size

<Switch checked size="sm" />
<Switch checked size="md" />

Loading / Disabled

<Switch loading />
<Switch checked disabled />
<Switch disabled />

API

Props

Name	Type	Default	Description
checked	boolean	--	Controlled toggle state
defaultChecked	boolean	false	Default state (uncontrolled)
disabled	boolean	false	Disabled
loading	boolean	false	Loading state, shows spinner
size	'sm' | 'md'	'md'	Size
onChange	(checked: boolean) => void	--	State change handler

Accessibility

• Uses native <button role="switch">, aria-checked reflects state
• Space / Enter keys to toggle
• Focus ring follows global :focus-visible style