Skip to content

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

Free

Simple Switch Field for React

Airplane Mode leads the row and the switch follows. The switch starts off, and there is no sentence under the label.

Airplane Mode and the switch share one row, label first. The switch starts off. There is no sentence under the label.

It fits an on or off setting that applies right away. A choice saved only when the form is submitted is a Checkbox. Base UI on React does not turn on airplane mode.

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

Field anatomy: root, label, input, description, error

Usage

<Field className="max-w-md" orientation="horizontal">
  <FieldLabel htmlFor="airplane-mode">Airplane Mode</FieldLabel>
  <Switch id="airplane-mode" />
</Field>

FAQ

How do the label and the switch share a row?

orientation is horizontal. FieldLabel comes first, then Switch, so Airplane Mode and the switch sit on one line.

How does Airplane Mode connect to the switch?

FieldLabel names the switch. Its htmlFor matches the control's id. max-w-md caps the row.

Does the switch start on?

This switch does not pass a checked default, so it starts off. The label stays beside it either way.

How do I add an explanation under the label?

Put the FieldLabel and a FieldDescription in FieldContent, and keep the Switch as the other child of the horizontal Field.

How do I stack the label over the switch?

Drop orientation, or set it to vertical. A switch under a label is a taller stack than this row.

Which key toggles the switch?

Space activates the focused switch. Field does not add arrow-key behavior of its own.

API Reference

Field

Sets orientation="horizontal" and htmlFor="airplane-mode". The rest is on the Field page.

Switch

Sets id="airplane-mode". The rest is on the Switch page.

All 38 field examples