Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Field examples · Basic Inputs

Horizontal Layout Input Field for React

An input with its label beside it in a horizontal field.

Framework
UI library

Label and input on one row, for settings panels and admin screens where vertical space is short. orientation="horizontal" on Field puts the Display Name label beside the input, and a fixed w-32 on the label keeps the input aligned when several rows stack.

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

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.

All 38 field examples