Components
Switch
On/off setting on Base UI Switch; on is an ink track with a paper thumb, optional ON/OFF text.
Preview
Install
bash
npx shadcn add @eloquent/switchUsage
tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";
<Field orientation="horizontal">
<Switch name="alerts" />
<FieldLabel>Breaking news alerts</FieldLabel>
</Field>
<Switch onLabel="On" offLabel="Off" aria-label="Breaking news alerts" />onLabel and offLabel are optional, decorative text; the switch role already announces the state. Without Field, wrap the switch in a <label>.
States
| State | Treatment |
|---|---|
| Off | Paper track, 1px ink border, ink thumb at the start |
| On | Ink track, paper thumb at the end |
| Focus | 2px ink outline, 2px offset |
| Invalid | 2px ink border, plus the Field's rule and message |
| Disabled | Halftone border and thumb, cursor-not-allowed |
Keyboard
| Key | Action |
|---|---|
| Tab / Shift+Tab | Move focus to and from the switch (disabled switches are skipped) |
| Space | Toggle on and off |
Vietnamese
Ink adaptation
Upstream shadcn's rounded track and thumb, shadow and primary-colour track are removed; the sm size is dropped. The thumb slides with a 150ms transform that is switched off under prefers-reduced-motion. The 24px track sits in a 44px pointer target built from an ::after layer. There is no hover treatment. Built on Base UI Switch.