Switch
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
A control that indicates whether a setting is on or off.
Overview
Use Switch for an on/off setting that takes effect immediately or changes a persistent preference.
Switches are useful for feature settings, notifications, privacy choices, and simple enabled or disabled states. Use Checkbox when the option is part of a form submission or a list of independent choices.
Anatomy
A switch has a track, thumb, label, optional description, and checked state.
Behavior
Use clear labels that describe the enabled state. Avoid labels like On or Enable without context.
Accessibility
Connect the switch to a label. If changing the switch has a delayed effect, show feedback so users know the update worked.
Installation
npx honestui@latest add switchUsage
import { Switch } from "@/components/ui/switch"<Switch />Examples
Our examples cover disabled, described, card-style, and form-connected switches.
For accessible labelling and validation, prefer using the Field component to wrap checkboxes. See the related example: Switch field.