Skip to content

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

Free

Switch with Description Field for React

Multi-factor authentication, a note about a one-time email code, and a switch at the end of the row that starts off.

The row leads with Multi-factor authentication. Under the label: enable it, and a one-time email code can stand in when there is no two-factor device. The switch is at the end and starts off.

Keep the sentence when people need it before they flip the switch. If that note is a warning, put it in an Alert above the row. React with Base UI does not send the code.

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">
  <FieldContent>
    <FieldLabel htmlFor="security-mfa">
      Multi-factor authentication
    </FieldLabel>
    <FieldDescription>
      Enable multi-factor authentication. If you do not have a two-factor
      device, you can use a one-time code sent to your email.
    </FieldDescription>
  </FieldContent>
  <Switch id="security-mfa" />
</Field>

FAQ

How do the sentences line up with the switch?

orientation is horizontal. FieldContent comes first and holds the FieldLabel and FieldDescription, and the Switch is the other child.

What does the description say?

The label is Multi-factor authentication. The description says to enable it, and that a one-time code sent to email can stand in when there is no two-factor device.

How does the label connect to the switch?

FieldLabel names the switch. Its htmlFor matches the control's id. FieldContent groups that label with the description so they stack beside the switch.

Does the switch start on?

This switch does not pass a checked default, so it starts off. max-w-md caps the row.

Why is the text before the switch?

FieldContent is the first child, so the label and the description lead the row and the switch follows. Swap those children to put the switch first.

Which key toggles the switch?

Space activates the focused switch. The description is text in the row, and Field does not add arrow-key behavior of its own.

API Reference

Field

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

Switch

Sets id="security-mfa". The rest is on the Switch page.

All 38 field examples