Switch

InstallationCopy Anchor Link

{
  "registries": {
    "@rabtx": "http://localhost:3002/r/{name}.json"
  }
}

npx shadcn@latest add @rabtx/switch

npx shadcn@latest add http://localhost:3002/r/switch.json

UsageCopy Anchor Link

Installed from the registry, import from @/components/ui/switch; inside this monorepo, from @rabtx/ui/switch.

import { Switch } from "@rabtx/ui/switch";

export function WifiSetting() {
  const [on, setOn] = useState(true);
  return (
    <Switch checked={on} onCheckedChange={setOn}>
      Wi-Fi
    </Switch>
  );
}

It is an <input type="checkbox"> with role="switch" and the HTML switch attribute, so the browser provides Space to toggle, the form value (name, value), and the on and off state for screen readers. With children it wraps itself in a <label>, so the text names it and the whole row toggles it. A bare switch needs a Field or an aria-label.

StatesCopy Anchor Link

Off, on and disabled. A disabled switch is dimmed to 50%, is skipped by Tab and never moves.

FieldCopy Anchor Link

Inside a Field, the label names the switch, the hint describes it, and error marks it invalid (a red edge and a soft halo) and links the message.

ControlledCopy Anchor Link

checked and onCheckedChange, as in shadcn. onChange still receives the native event.

Settings rowsCopy Anchor Link

Reverse the label with flex-row-reverse justify-between to put the switch at the end of a row. The row is still one label, so a click anywhere on it toggles the switch.

Right to leftCopy Anchor Link

The thumb starts on the inline start edge and travels toward the end, so it mirrors in right-to-left text with no prop.

APICopy Anchor Link

Switch takes everything a native checkbox <input> takes, except type, size and role, plus:

Outside React, the class names are exported from @rabtx/ui/switch/styles:

<label class="rx-switch-label">
  <input type="checkbox" role="switch" switch class="rx-switch rx-switch-md" />
  Wi-Fi
</label>

ThemingCopy Anchor Link

The Switch reads only the theme tokens.

How the motion worksCopy Anchor Link

The thumb is the input's ::before, so there is no extra markup to keep in sync.

Browser supportCopy Anchor Link

• Everywhere: appearance: none, :checked, :active, :has(), color-mix(), logical insets, nesting, @property and linear() easings: Chrome 120+, Safari 17.2+ and Firefox 128+ draw the same switch (from compatibility data; tested in Chrome).
• Safari 17.4+: the switch attribute makes it a native switch (announced as on and off, :indeterminate never matches). The page's CSS still draws it. Elsewhere the attribute is ignored and role="switch" gives the same semantics.
• Not used yet: the experimental ::thumb and ::track pseudo-elements (Safari behind a flag).

AccessibilityCopy Anchor Link

• Announced as a switch, on or off, from the input's native checked state; there is no aria-checked to drift.
• Space toggles it. Enter does not, as with any native checkbox.
• Focus shows a 2px --ring outline. Label it with children, a Field or an aria-label.
• The state is shown by position and color, never motion alone. Reduced motion and data-motion="off" switch instantly.