Switch

Switches are for immediate boolean state: enabled or disabled, visible or hidden, send or do not send. The Swiss version keeps the control visually spare so it can live inside settings rows, publishing panels, and compact admin forms without pulling more attention than the choice itself.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Switch defaultChecked />
<Switch aria-label="Enable notifications" />

Why This Primitive Exists

A switch communicates "this setting changes immediately" more clearly than a checkbox when the interface is clearly a preference or feature toggle surface.

• Use it for binary settings that can be understood as on or off.
• Pair it with clear text that explains the consequence of each state.
• Avoid it for choices that need confirmation, multiple options, or mixed states.

Examples

Basic Toggle

The smallest useful pattern is a switch next to descriptive copy. The label should explain the setting; the control only communicates the state.

<Switch aria-label="Enable launch notifications" defaultChecked />

Settings Rows

Switches become more useful when they sit at the end of a settings row that explains the decision and its consequence.

In Context

Use switches inside cards, side panels, or publishing forms where toggling the state is part of a broader workflow. If changing the value needs a submit button, the mental model is closer to a checkbox field inside a form.

<div className="flex items-center justify-between">
  <span>Public preview</span>
  <Switch defaultChecked />
</div>

Guidance

Choose The Right Control

• Use a switch when the user expects an immediate state change.
• Use a checkbox when the value is part of a larger form submission.
• Use radios or a select when the user is choosing among several options.

Make The Consequence Clear

• Always pair the switch with a nearby label or description.
• Avoid vague labels like Enabled.
• If the state has side effects, explain them in helper text rather than assuming the thumb position is enough.

Keep It Binary

• Do not use a switch for tri-state logic.
• Do not overload a single switch with several related preferences.
• If the setting is destructive or hard to reverse, add a confirmation pattern around the workflow instead of hiding that risk in the toggle itself.

API Reference

Switch

Switch composes @radix-ui/react-switch and accepts the same root props as React.ComponentProps<typeof SwitchPrimitive.Root>.

Notes

The component also accepts standard Radix and DOM props like name, required, value, id, and className.