Foundation component · Forms

Switch

Turn one setting on or off and apply the change immediately.

Live playground

Switch label

Choose Switch when

The setting is binary and takes effect as soon as it changes.
Use Checkbox when the value belongs to a form that is submitted later.
Use the control-only layout when a visible label outside the Switch names it, such as a Settings Row label.

Labels and feedback

Use a label that describes the setting, not the action: “Notifications,” not “Enable.”
Keep compact switches control-only and connect them to a visible external label.
Announce a failure if the application cannot persist the new state.

Implementation

Root owns switch semantics; layout controls whether its visible label is internal or supplied by the surrounding pattern.

import { Switch } from "@lenso/ui/switch";

<Switch.Root aria-label="Notifications" defaultChecked layout="control-only">
  <Switch.Thumb />
</Switch.Root>;