Switch

The macOS 26 toggle, aligned onto the Radix Switch primitive: a capsule track that flips from a translucent gray rail (off) to accent blue (on), with a soft white knob that slides across. Geometry (track size, capsule radius, knob diameter, travel) is lifted from the Apple macOS 26 UI Kit; colors flip light/dark via the Acrylic theme tokens. Fully accessible and keyboard-operable with a shadcn-compatible API.

Installation

npx shadcn add https://acrylic-ui.vercel.app/r/switch.json

Usage

"use client"import { Switch } from "@/registry/acrylic/switch"// On, off, and disabled — the three resting looks of the macOS 26 toggle.export default function SwitchDemo() {  return (    <div className="flex items-center gap-6 text-foreground">      <Switch defaultChecked aria-label="On" />      <Switch aria-label="Off" />      <Switch disabled aria-label="Disabled" />    </div>  )}

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

<Switch defaultChecked />

Examples

The five macOS control sizes across on / off / disabled states, plus a labelled settings-style row.

"use client"import { Switch } from "@/registry/acrylic/switch"const sizes = ["mini", "small", "medium", "large", "xl"] as const// The five macOS control sizes (track heights 16/20/24/28/36) plus the toggle// states, lifted from the Apple macOS 26 UI Kit Toggles page. A labelled row at// the bottom shows the conventional settings-style usage.export default function SwitchShowcase() {  return (    <div className="flex flex-col gap-4 text-foreground">      {sizes.map((size) => (        <div key={size} className="flex items-center gap-4">          <span className="w-14 shrink-0 text-xs text-muted-foreground">{size}</span>          <Switch size={size} defaultChecked aria-label={`${size} on`} />          <Switch size={size} aria-label={`${size} off`} />          <Switch size={size} defaultChecked disabled aria-label={`${size} disabled on`} />          <Switch size={size} disabled aria-label={`${size} disabled off`} />        </div>      ))}      <label className="flex items-center gap-3 text-[13px]">        <Switch defaultChecked aria-label="Wi-Fi" />        Wi-Fi      </label>    </div>  )}

Notes

• Track: a capsule (radius = height/2). OFF is the kit's translucent gray rail (black 6% light / white 6% dark), wired to --acr-chip so it flips light/dark for free. ON is the kit's opaque accent #0088FF (dark #0091FF), which maps exactly onto bg-primary.
• Knob: a soft white circle inset 2px (1.5 mini / 3 xl) inside the track, with the kit's layered ambient shadow and a hairline border. The kit's own knob is a wide squircle pill; on the web we use a circular knob (diameter = track height − 2·inset), the conventional Switch look, matching our Slider.
• Travel: the knob slides by trackWidth − knobWidth − 2·inset (computed via calc(), so it always lands at the right inset) = 20 / 24 / 30 / 36 / 44 px for mini / small / medium / large / xl, with a macOS easing (cubic-bezier(0.32, 0.72, 0, 1), 200ms; respects prefers-reduced-motion).
• States: focus shows an accent ring (ring-ring/25); disabled dims to 50%.
• Track sizes (W×H, verbatim from the kit): 36×16 / 44×20 / 54×24 / 64×28 / 80×36 px for mini / small / medium / large / xl.
• Props: checked, defaultChecked, onCheckedChange, disabled, required, name, value, and size (mini · small · medium (default) · large · xl).

<Switch defaultChecked size="large" />
<Switch checked={enabled} onCheckedChange={setEnabled} />
<Switch disabled />