Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Field examples · Toggles

Switch with Description Field for React

A multi-factor authentication switch with a label and a description.

Framework
UI library

A setting that needs explaining before people turn it on. FieldContent stacks the Multi-factor authentication label and its description, and the Switch sits at the end of the horizontal row.

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

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.

All 38 field examples