Skip to content

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

Free

Horizontal Layout Input Field for Solid

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.

UI library: Ark UI

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. Ark UI on Solid does not move this label above the field.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Field class="max-w-md" orientation="horizontal">
    <FieldLabel class="w-32">Display Name</FieldLabel>
    <Input 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. Field connects the two for you, with no ids to write. 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". The rest is on the Field page.

Input

Sets placeholder="John D." and type="text". The rest is on the Input page.

All 38 field examples