Skip to content

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

Free

Inline Label Input for React

An Age field with its label beside it, in a fixed width aligned to the end, and the placeholder 25.

The label Age sits beside a number field, in a fixed width, aligned to the end of that label. The placeholder is 25. The field fills the rest of the row.

Use it for compact settings where labels can share a column. On a phone, a stacked Field leaves more room for the input. In React, Base UI does not stack this horizontal row for you.

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

Input anatomy: input, placeholder, value, caret

Usage

<Field className="w-full max-w-sm gap-4" orientation="horizontal">
  <FieldLabel className="w-24 flex-none! justify-end" htmlFor="inline-age">
    Age
  </FieldLabel>
  <Input
    className="flex-1 bg-background"
    id="inline-age"
    placeholder="25"
    type="number"
  />
</Field>

FAQ

How does the label sit beside the input?

Field takes orientation horizontal, which lays out its children in a row and centers them vertically. gap-4 spaces the label from the input.

Why does the label have a fixed width?

w-24 gives every label in a column the same width, so the inputs line up. flex-none! stops the label from growing, which a horizontal field would otherwise let it do, and justify-end aligns the text against the input.

How wide is the input?

flex-1 lets it fill the rest of the row, up to the field's max-w-sm. It's a type number input with the placeholder 25.

Does it work in right-to-left layouts?

Yes. The row follows the reading direction, and justify-end aligns the label to its end, so the label stays next to the input on either side.

What about narrow screens?

A side-by-side label leaves little room for the input on a phone. Use orientation responsive inside a FieldGroup to stack the label above the input on narrow containers and put them side by side on wide ones.

How is Age tied to the field?

Clicking the label focuses the field, and screen readers announce it with the field. FieldLabel sets htmlFor to inline-age, the input's id.

API Reference

Field

Sets orientation="horizontal" and htmlFor="inline-age". The rest is on the Field page.

Input

Sets id="inline-age", placeholder="25" and type="number". The rest is on the Input page.

All 24 input examples