Layout UI

Switch

A pill-shaped toggle for binary on/off settings. Built on Base UI Switch with a sliding thumb.

Preview

Installation

bash
npx shadcn@latest add @layout/switch

Usage

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

Examples

Controlled

Settings list

Disabled

Guidelines for AI agents

Use for settings that take immediate effect without a save action. Pair with a Label for accessibility. Prefer Switch over Checkbox when the outcome is immediate; prefer Checkbox for form submissions.

Never

  • Neveruse Switch for form checkboxes that need a submit action; use Checkbox instead
  • Neveromit a label — associate via htmlFor or pass aria-label
  • Neveroverride the track or thumb colours directly; they derive from --layout-input and --layout-primary
  • Neveruse inside a RadioGroup or CheckboxGroup

Tokens consumed

--layout-primary--layout-input--layout-bg--layout-ring--layout-duration-base--layout-shadow-xs