Skip to content

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

Free

Switch with Description Field for Solid

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

UI library: Ark UI

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. Solid with Ark UI does not send the code.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Field class="max-w-md" orientation="horizontal">
    <FieldContent>
      <FieldLabel>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 />
  </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. Field connects the two for you, with no ids to write. 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". The rest is on the Field page.

Switch

No extra props in this demo. The rest is on the Switch page.

All 38 field examples