Switch

A control that toggles between checked and not checked. The thumb travels along the inline axis — off at start, on at end — so it flips correctly in RTL.

Basic

Toggle a binary setting. Pair with a Label.

Installation

CLI

npx @sonojs/ui@latest add switch

Composition

structure

Switch

Usage

switch.tsx

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

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

Direction

SonoJS sets dir from useDirection and slides the thumb with translate-x (flipped in RTL) so it sits tight to the edges and checked moves toward the inline end.

direction.tsx

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

// Thumb sits on the inline start when off, slides to the inline end when on.
// In RTL that means right → left. Toggle LTR/RTL in the preview to verify.
<Switch defaultChecked />

Props

Prop	Type	Default	Description
checked	boolean	—	Controlled checked state.
defaultChecked	boolean	—	Uncontrolled initial checked state.
onCheckedChange	(checked: boolean) => void	—	Called when the checked state changes.
size	"sm" · "default"	"default"	Control height/width scale.
dir	"ltr" · "rtl"	inherited	Writing direction for thumb travel. Defaults from `useDirection`.
disabled	boolean	false	Disable the switch.