Skip to content

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

Free

Horizontal Layout Field for React

Username and Language, each label beside its control. Language opens on English, with Spanish and French in the list.

Two rows, labels beside the controls. Username is a text field, placeholder johndoe. Language already shows English, with Spanish and French in the list.

Use it for a short preferences form where labels share a column. If Language should be searchable, use a Combobox. Neither React nor Base UI translates these labels.

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="horizontal">
    <FieldLabel htmlFor="settings-username">Username</FieldLabel>
    <Input id="settings-username" placeholder="johndoe" type="text" />
  </Field>
  <Field orientation="horizontal">
    <FieldLabel htmlFor="settings-language">Language</FieldLabel>
    <Select defaultValue="en" items={languages}>
      <SelectTrigger id="settings-language">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          {languages.map((item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  </Field>
</FieldGroup>

FAQ

How do the labels sit beside the controls?

Both fields set orientation to horizontal inside one FieldGroup. Username is an Input, and Language is a Select, each with its FieldLabel first.

What does the username field accept?

type is text, and the placeholder is johndoe. FieldLabel names the input Username. Its htmlFor matches the control's id.

Which language is selected at first?

There is no placeholder, because a value is already selected. The items are English, Spanish, and French. Set defaultValue to en.

Where do the language options go?

Each language is a SelectItem. The trigger shows the selected label.

How wide is the pair of rows?

max-w-md on FieldGroup caps both rows. The label and the control share each row.

How do I stack these labels again?

Drop orientation on a Field, or set it to vertical. That field's label moves back above its control.

API Reference

Field

Sets orientation="horizontal", htmlFor="settings-username" and htmlFor="settings-language". The rest is on the Field page.

Input

Sets id="settings-username", placeholder="johndoe" and type="text". The rest is on the Input page.

Select

Sets defaultValue="en", items={languages}, id="settings-language" and value={item.value}. The rest is on the Select page.

All 38 field examples