Skip to content

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

Free

Mixed Orientations Field for React

Project Name stacked over My Project with a team note, a Make project public switch, and Archive this project when complete.

Project Name is stacked, placeholder My Project, with This will be visible to all team members under it. Make project public sits beside a switch, with Anyone on the internet can see this project. Archive this project when complete is a checkbox.

Reach for it when one form mixes a text field with row settings. If the archive line is the only choice, a Checkbox is enough. On React, Base UI does not publish the project.

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

<FieldGroup className="max-w-md">
  <Field>
    <FieldLabel htmlFor="project-name">Project Name</FieldLabel>
    <Input id="project-name" placeholder="My Project" type="text" />
    <FieldDescription>
      This will be visible to all team members.
    </FieldDescription>
  </Field>
  <Field orientation="horizontal">
    <FieldContent>
      <FieldLabel htmlFor="project-public">Make project public</FieldLabel>
      <FieldDescription>
        Anyone on the internet can see this project.
      </FieldDescription>
    </FieldContent>
    <Switch id="project-public" />
  </Field>
  <Field orientation="horizontal">
    <Checkbox id="project-archive" />
    <FieldLabel className="font-normal" htmlFor="project-archive">
      Archive this project when complete
    </FieldLabel>
  </Field>
</FieldGroup>

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.

API Reference

Field

Sets htmlFor="project-name", orientation="horizontal", htmlFor="project-public" and htmlFor="project-archive". The rest is on the Field page.

Input

Sets id="project-name", placeholder="My Project" and type="text". The rest is on the Input page.

Switch

Sets id="project-public". The rest is on the Switch page.

Checkbox

Sets id="project-archive". The rest is on the Checkbox page.

All 38 field examples