Switch

Installation

npx shadcn@latest add @fujin/switch

Usage

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

<Field orientation="horizontal">
  <FieldLabel>Weekly digest</FieldLabel>
  <Switch checked={digest} onCheckedChange={setDigest} />
</Field>

Outside a Field, wrap it in a Label. A sibling <label htmlFor> does not work because the switch renders a <span> plus a hidden input.

<Label>
  <Switch size="sm" />
  Compact rows
</Label>

Switch or checkbox?

Use a switch when the change takes effect immediately. When the choice only applies once a form is submitted, or for consent ("I accept the terms"), use Checkbox.

What's different from shadcn/ui

• The off track uses muted-foreground instead of the pale input color, so the track and thumb meet the 3:1 non-text contrast WCAG 1.4.11 requires.
• Both sizes have a 24px-tall hit area (WCAG 2.5.8), even though the sm track is drawn at 16px.
• The focus ring is solid.

API Reference

Every other prop is forwarded to the Base UI Switch.