Switch

"use client";import { Label } from "@/registry/okibi/ui/label";import { Switch } from "@/registry/okibi/ui/switch";export default function SwitchDemo() {  return (    <div className="flex items-center gap-2">      <Switch id="switch-demo-firewall" defaultChecked />      <Label htmlFor="switch-demo-firewall">Firewall</Label>    </div>  );}

Installation

npm install @radix-ui/react-switch

Usage

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

<Switch id="ice" defaultChecked />

Anatomy

<Label htmlFor="ice">Ice protection</Label>
<Switch id="ice" defaultChecked />   {/* single Radix Switch.Root + Thumb */}

Examples

Disabled

The native disabled attribute locks the toggle in its current on/off state.

"use client";import { Label } from "@/registry/okibi/ui/label";import { Switch } from "@/registry/okibi/ui/switch";export default function SwitchDisabledDemo() {  return (    <div className="space-y-3">      <div className="flex items-center gap-2">        <Switch id="switch-disabled-off" disabled />        <Label htmlFor="switch-disabled-off">Relay offline</Label>      </div>      <div className="flex items-center gap-2">        <Switch id="switch-disabled-on" disabled defaultChecked />        <Label htmlFor="switch-disabled-on">Firewall locked</Label>      </div>    </div>  );}

API Reference

Switch

Accessibility

• Built on Radix Switch.Root, exposing role='switch' with aria-checked toggled by Space / Enter.
• On / off is reflected via data-state driving the track color and the thumb's translate-x.
• aria-invalid='true' flips the track to the destructive keyline (border-destructive, ring-destructive).
• Focus shows the 2px signal ring (focus-visible:ring-2 ring-ring ring-offset-2).
• The control is 20x36px — below the 44px touch minimum — so always pair it with a clickable Label to extend the target.
• Disabled is disabled:opacity-60 with pointer events off; the thumb slide uses the fast token, no spring.

Guidelines

Do

• Use a switch for an instant on/off setting that takes effect immediately, with no Save step.
• Always pair with a Label (via htmlFor / id) to name the control and widen the tap target.
• Drive it controlled with checked + onCheckedChange when the value lives in app state.

Don't

• Don't use a switch where the change only applies after submitting a form — use a Checkbox.
• Don't leave the switch unlabeled; an icon alone is not an accessible name.
• Don't stack many switches without labels in a tight row — they fall below the touch target.