Switch

InstallationCopy Anchor Link

Installs Field too.

UsageCopy Anchor Link

import { Field, FieldContent, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

export function UpdatesField() {
  return (
    <Field orientation="horizontal" className="items-center justify-between">
      <FieldContent>
        <FieldLabel>Send me updates about this request</FieldLabel>
      </FieldContent>
      <Switch name="updates" defaultChecked />
    </Field>
  );
}

Use a Switch for a setting that takes effect the moment it is flipped: notifications, a feature on or off. If the choice is only applied when a form is submitted, use Checkbox. Label what the switch does, not its state: "Request updates", not "On".

AnatomyCopy Anchor Link

• Track (<span role="switch"> and a hidden <input>): 48 by 24px.
• Thumb: the white circle that slides; it holds the check icon when icon is set.
• Label, helper text and error: from Field. Put the switch after FieldContent to trail it.

ExamplesCopy Anchor Link

StatesCopy Anchor Link

Off, on, with a check icon, read-only, disabled and error.

Trailing switchCopy Anchor Link

Put the Switch after FieldContent and use justify-between for a settings list, with the switch at the end of each row.

RTLCopy Anchor Link

The thumb moves along the logical axis: it starts on the right and slides left when on, the way the track reads. Nothing is flipped by hand; a trailing switch sits on the left.

AccessibilityCopy Anchor Link

• The switch role with aria-checked, and a hidden native input for forms.
• The label is from Field; clicking it flips the switch.
• The off track and its white thumb, and the on track and thumb, are 3:1 or better in light and dark (WCAG 1.4.11). State is also shown by the thumb position, not colour alone.
• Focus is a 2px outline 2px outside the track. An error adds a 2px error outline and a message with an icon.
• Respects reduced motion: the thumb moves without animation.

API ReferenceCopy Anchor Link

Deviations from DGACopy Anchor Link

• The off track is control-border (4.8:1) instead of #ccc (1.6:1), with a white thumb (new token control-thumb).
• Hover and press on the on track keep green-600 in dark mode (see Checkbox).

ContrastCopy Anchor Link