Switch

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add switch

Usage#

import { Switch } from "@/components/ui/switch"

export function Example() {
  return (
    <label htmlFor="airplane" className="flex items-center gap-2.5">
      <Switch id="airplane" defaultChecked />
      Airplane mode
    </label>
  )
}

States#

Off rests on the input fill; on slides the thumb across a brand (accent) track. The thumb carries a shadow so it reads on both states in every theme.

Controlled#

Drive the switch from state with checked and onCheckedChange, or leave it uncontrolled with defaultChecked.

In a settings list#

The common shell: a label and description on the left, the switch trailing right. The whole row is the label, so the full width is the hit target.

FAQ#