Switches

Usage and anatomy

Switch is an accessible binary control for turning an option on or off. Pair <Switch /> with a <Label /> connected through a matching htmlFor value.

import { Label } from "@acme/ui/label"
import { Switch } from "@acme/ui/switch"

<div className="flex plumeui-wr plumeui-naa">
  <Switch id="show-online" defaultChecked />
  <Label htmlFor="show-online">Show online</Label>
</div>

Use Switch for immediate on/off preferences rather than selecting from multiple options.
Use a clear, unique id so the label remains clickable.
Use descriptions or choice cards when the setting needs additional context.

Switch States

Switch Sizes

Switch Disabled States

Switch with Description

Switch Choice Cards

Switch with Form

API reference

Switch

Prop	Type	Default
size	md \| lg	md
defaultChecked	boolean	false
disabled	boolean	false

Switch also accepts native Radix switch props such as checked, onCheckedChange, name, and aria-invalid.