Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Switch with State Labels for React

A switch named Power that starts off, with Off on one side and On on the other. The words swap as it toggles.

The switch starts off. The word on the leading side reads Off, and the other side reads On. Turning it on swaps those words. Its accessible name is Power.

Use swapping words when the state must be spelled out and stay in agreement with the switch. A fixed On label will lie once the switch is off. A form field can be a Checkbox. In React, Base UI reports each change, and this demo stores it so the words match.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Switch anatomy: root, control, thumb, label

Usage

<div className="flex items-center gap-2">
  <span className="font-medium text-sm">{checked ? "On" : "Off"}</span>
  <Switch
    aria-label="Power"
    checked={checked}
    onCheckedChange={setChecked}
  />
  <span className="text-muted-foreground text-sm">
    {checked ? "Off" : "On"}
  </span>
</div>

FAQ

Which side says On?

The first span shows On when the switch is on and Off when it is off, with font-medium text-sm. The second span shows the other word with text-muted-foreground text-sm. The row is flex items-center gap-2.

How do I control this switch in React?

This file keeps the state itself, starting off, and passes it back to the Switch. Both words read that same state. Pass checked; onCheckedChange receives the new boolean.

What do screen readers call this switch?

It has no visible label, so the demo passes aria-label (Power). Change it to the setting the switch controls, or use a visible FieldLabel instead.

How do I add a visible label to this switch?

Put the Switch in a horizontal Field next to a FieldLabel. Clicking the label toggles the switch, and screen readers read the label with it. Give the Switch an id and set the same value as htmlFor on the FieldLabel.

Does this switch submit with a form?

Give it a name. When on, it submits its value, which defaults to on. When off, it submits nothing. With Base UI, uncheckedValue sets what it submits when off.

Which keys toggle the switch?

Tab moves focus to the switch. Space toggles it, and so does Enter.

API Reference

Switch

Sets aria-label="Power", checked={checked} and onCheckedChange={setChecked}. The rest is on the Switch page.

All 19 switch examples