Skip to content

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

Free

Complex Multi-Field Form for React

Personal Information: First Name and Last Name share a row, then a full-width Email and a Country menu that says Select country.

Personal Information is the caption. First Name and Last Name share a row, placeholders John and Doe. Email is full width, placeholder john@example.com. Country says Select country, with United States, United Kingdom, and Canada.

Reach for it on sign-up or profile forms that mix names with one menu. A country list people can search is a Combobox. Base UI on React does not fill these in.

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

<FieldSet className="w-full max-w-md">
  <FieldLegend>Personal Information</FieldLegend>
  <FieldGroup>
    <div className="grid grid-cols-2 gap-4">
      <Field>
        <FieldLabel htmlFor="personal-first-name">First Name</FieldLabel>
        <Input id="personal-first-name" placeholder="John" type="text" />
      </Field>
      <Field>
        <FieldLabel htmlFor="personal-last-name">Last Name</FieldLabel>
        <Input id="personal-last-name" placeholder="Doe" type="text" />
      </Field>
    </div>
    <Field>
      <FieldLabel htmlFor="personal-email">Email</FieldLabel>
      <Input
        id="personal-email"
        placeholder="john@example.com"
        type="email"
      />
    </Field>
    <Field>
      <FieldLabel htmlFor="personal-country">Country</FieldLabel>
      <Select items={countries}>
        <SelectTrigger className="w-full" id="personal-country">
          <SelectValue placeholder="Select country" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {countries.map((item) => (
              <SelectItem key={item.value} value={item.value}>
{/* The rest of the file is under Installation. */}

FAQ

What is the Personal Information line?

FieldLegend on FieldSet is the caption, in the default legend style. FieldGroup stacks the rows under it. There is no FieldDescription on the set.

How do First Name and Last Name share a row?

They sit in a grid with grid-cols-2 and gap-4. Both inputs use type text, with placeholders John and Doe.

How is Email different from the name row?

Email is its own full-width Field under the grid. type is email, and the placeholder is john@example.com.

What does the country select show before a choice?

The trigger shows the placeholder Select country. It's the placeholder on SelectValue. The items are United States, United Kingdom, and Canada, each a SelectItem.

How does each label connect?

FieldLabel names the control. Its htmlFor matches the control's id.For Country, that id is on the SelectTrigger. The labels are First Name, Last Name, Email, and Country.

How wide is the set?

The set is capped with max-w-md. Email and Country each take the full width under the name row.

API Reference

Field

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

Input

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

Select

Sets items={countries}, id="personal-country", placeholder="Select country" and value={item.value}. The rest is on the Select page.

All 38 field examples