Skip to content

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

Free

Complex Multi-Field Form for Ark UI

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. Ark 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>First Name</FieldLabel>
        <Input placeholder="John" type="text" />
      </Field>
      <Field>
        <FieldLabel>Last Name</FieldLabel>
        <Input placeholder="Doe" type="text" />
      </Field>
    </div>
    <Field>
      <FieldLabel>Email</FieldLabel>
      <Input placeholder="john@example.com" type="email" />
    </Field>
    <Field>
      <FieldLabel>Country</FieldLabel>
      <Select collection={collection}>
        <SelectTrigger className="w-full">
          <SelectValue placeholder="Select country" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {collection.items.map((item) => (
              <SelectItem item={item} key={item.value}>
                {item.label}
              </SelectItem>
            ))}
          </SelectGroup>
{/* 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. Field connects the two for you, with no ids to write. 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

No extra props in this demo. The rest is on the Field page.

Input

Sets placeholder="John", type="text", placeholder="Doe", placeholder="john@example.com" and type="email". The rest is on the Input page.

Select

Sets collection={collection}, placeholder="Select country" and item={item}. The rest is on the Select page.

All 38 field examples