Skip to content

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

Free

Responsive Layout Field for React

Display Name and Username stack their labels in a narrow group and place each label beside the field once the group is wide.

Display Name and Username, placeholders John Doe and @johndoe. In a narrow group the label sits above the field. Once the group is wide enough, the label sits beside it.

Keep it for one form that should work in a sidebar and on a full page. A label that never moves is a Label. The row follows the group's width, and Base UI on React does not follow the window.

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 orientation="responsive">
    <FieldLabel htmlFor="public-profile-display-name">
      Display Name
    </FieldLabel>
    <Input
      id="public-profile-display-name"
      placeholder="John Doe"
      type="text"
    />
  </Field>
  <Field orientation="responsive">
    <FieldLabel htmlFor="public-profile-username">Username</FieldLabel>
    <Input id="public-profile-username" placeholder="@johndoe" type="text" />
  </Field>
</FieldGroup>

FAQ

When do these labels move beside the inputs?

orientation is responsive on each Field. The label stacks over the input until the FieldGroup container reaches the @md/field-group size, then the label and input share a row.

Why are both fields inside FieldGroup?

The @md switch is a container query on FieldGroup, so responsive fields belong inside that group. This demo wraps Display Name and Username in one FieldGroup capped with max-w-md.

What is in each field?

Each field is a FieldLabel and an Input with type text. The placeholders are John Doe and @johndoe. There is no FieldDescription.

How do the labels connect?

FieldLabel names that input. Its htmlFor matches the control's id. The labels are Display Name and Username.

Where would a hint go on the wide row?

Put the label and a FieldDescription in FieldContent, as the first child of the Field. FieldContent keeps that pair stacked beside the input once the row layout is on.

How do I keep the row at every width?

Set orientation to horizontal instead of responsive. horizontal stays a row, including in a narrow container.

API Reference

Field

Sets orientation="responsive", htmlFor="public-profile-display-name" and htmlFor="public-profile-username". The rest is on the Field page.

Input

Sets id="public-profile-display-name", placeholder="John Doe", type="text", id="public-profile-username" and placeholder="@johndoe". The rest is on the Input page.

All 38 field examples