Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Field examples · Layouts

Mixed Orientations Field for React

A vertical input, a horizontal switch with a description and a horizontal checkbox in one group.

Framework
UI library

Each control in the layout it reads best in. A text input stacks under its label, a Switch sits at the end of a row beside a label and description held in FieldContent, and a Checkbox leads its label. All three are Fields in one FieldGroup, with orientation set per field.

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

Why is Project Name stacked when the other rows are not?

That Field leaves orientation unset, so it stays vertical: FieldLabel, Input, then FieldDescription. The description reads This will be visible to all team members.

How does the public switch line up with its hint?

That Field sets orientation to horizontal. FieldContent holds the FieldLabel Make project public and the FieldDescription, and the Switch is the other child.

How is the archive checkbox labeled?

The Checkbox comes first, then a FieldLabel with font-normal. The label reads Archive this project when complete. orientation is horizontal.

How do the labels connect to their controls?

FieldLabel names that control. Its htmlFor matches the control's id. Project Name's input is type text, with placeholder My Project.

What keeps the three rows together?

One FieldGroup stacks the vertical field, the switch row, and the checkbox row. max-w-md caps the group.

When is FieldContent used in this form?

Only on the switch row, where the label and the description need to stay a pair beside the Switch. The checkbox row is a single label, so it has no FieldContent.

All 38 field examples