Skip to content

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

Free

Horizontal Layout Input Field for React

Display Name in a fixed-width label beside a text field. The placeholder is John D., and the label and field stay on one row.

Display Name and the field share one row. The label keeps a fixed width. The placeholder is John D.

It fits a settings row where labels should line up. A name with no row spacing is a Label. Base UI on React does not move this label above the 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

Anatomy

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

Usage

<Field className="max-w-md" orientation="horizontal">
  <FieldLabel className="w-32" htmlFor="profile-display-name">
    Display Name
  </FieldLabel>
  <Input id="profile-display-name" placeholder="John D." type="text" />
</Field>

FAQ

How do the label and input share a row?

orientation is horizontal on Field, so Display Name and the input sit side by side. Field sets data-orientation to horizontal.

Why does the label have a fixed width?

w-32 on FieldLabel holds the label at a fixed width, so the input starts at the same inset. The field itself is capped with max-w-md.

How does Display Name connect to the input?

FieldLabel names the input. Its htmlFor matches the control's id. The label text is Display Name.

What does the input accept?

type is text. The placeholder is John D., and it clears once someone types.

How do I add helper text on this row?

Put the label and a FieldDescription inside FieldContent, and leave the Input as the other child of the horizontal Field. FieldContent keeps that pair stacked beside the input.

How do I stack the label back over the input?

Drop orientation, or set it to vertical. The label then sits above the input and w-32 is no longer what lines them up.

API Reference

Field

Sets orientation="horizontal" and htmlFor="profile-display-name". The rest is on the Field page.

Input

Sets id="profile-display-name", placeholder="John D." and type="text". The rest is on the Input page.

All 38 field examples