Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Switch examples · Labeled

Switch with On Label for React

A switch that starts on, with the word On beside it.

Framework
UI library

A Switch that starts on with the word On after it, for a setting whose enabled state should be spelled out. The word is plain text: it reads On whatever the switch does, so keep it for read-mostly settings or wire it to the state.

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

Does the On text change when the switch turns off?

No. The span always reads On, with font-medium text-sm, in a flex items-center gap-2 row. The switch starts on through its default prop. See Switch with State Labels for words that follow the state.

How do I control this switch in React?

To change that word with the switch, keep the on or off state in your own state, render the word from it, and pass the state back to the Switch. 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 (Notifications). 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