Skip to content

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

Free

Multiple Inputs in Group Field for React

First Name, Last Name, and Email stacked in one column with no group caption. Placeholders are John, Doe, and john@example.com.

Three fields, no caption. First Name and Last Name are text, placeholders John and Doe. Email is an email field, placeholder john@example.com. Labels sit above the fields.

Use it when each label is enough and the fields just need even spacing. One email on its own is an Input. React with Base UI does not submit the group.

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>
    <FieldLabel htmlFor="contact-group-first-name">First Name</FieldLabel>
    <Input id="contact-group-first-name" placeholder="John" type="text" />
  </Field>
  <Field>
    <FieldLabel htmlFor="contact-group-last-name">Last Name</FieldLabel>
    <Input id="contact-group-last-name" placeholder="Doe" type="text" />
  </Field>
  <Field>
    <FieldLabel htmlFor="contact-group-email">Email</FieldLabel>
    <Input
      id="contact-group-email"
      placeholder="john@example.com"
      type="email"
    />
  </Field>
</FieldGroup>

FAQ

What stacks First Name, Last Name, and Email?

One FieldGroup stacks three Fields. Each field is a FieldLabel and an Input, and the group is capped with max-w-md.

What input types does this group use?

First Name and Last Name use type text, with placeholders John and Doe. Email uses type email, with placeholder john@example.com.

How does each label connect to its input?

FieldLabel names the input. Its htmlFor matches the control's id. The three labels are First Name, Last Name, and Email.

Why are the labels above the inputs?

None of the fields set orientation, so each one stays vertical. The label stacks over its input.

What order do the fields follow?

The group renders First Name, then Last Name, then Email. Tabbing follows that same order.

How do I give the three fields one caption?

Wrap the FieldGroup in a FieldSet and add a FieldLegend. This demo is the group alone, with no legend.

API Reference

Field

Sets htmlFor="contact-group-first-name", htmlFor="contact-group-last-name" and htmlFor="contact-group-email". The rest is on the Field page.

Input

Sets id="contact-group-first-name", placeholder="John", type="text", id="contact-group-last-name", placeholder="Doe" and id="contact-group-email". The rest is on the Input page.

All 38 field examples