Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Switch examples · Labeled

Switch with State Labels for React

A switch with On and Off text on both sides that swaps as it toggles.

Framework
UI library

A Switch between two words that follow its state: the first word reads the current state, and the second the other one. The demo keeps the state itself, so both words and the switch always agree.

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

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.

All 19 switch examples