Switch

Turn a setting on or off, taking effect right away.

Receive notifications about this project.

Fig. 1 Turn project updates on or off. It applies at once, with no save button.

When to use it

Use Switch for settings that apply the moment they change, such as notifications or dark mode. Label it with the setting, not the action.

Inside a form that people save at the end, use Checkbox, so nothing seems to happen before they submit.

Checkbox

Saved with the form.

Include in your project

Options reviewed before submitting.

SwitchThis page

Takes effect now.

Receive notifications about this project.

Preferences that apply at once.

Fig. 2 Two on/off controls. The difference is when the change takes effect.

How it behaves

Use checked/onCheckedChange or defaultChecked. Base UI exposes native form input semantics through name.

Pair it with a visible label. Space toggles the switch; disabled controls are unavailable to interaction.

Pointer changes use a brief thumb transition. Keyboard changes and reduced-motion changes are immediate.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

switch-example.tsx

The full source is yours to edit once installed:

switch.tsx