Skip to content

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

Free

Nested Fields for React

Shipping Address asks where to send the order. Street Address sits above Apartment, suite, etc., then City beside ZIP Code.

Shipping Address is the caption, then Where should we send your order? Street Address, placeholder 123 Main St, comes first. Apartment, suite, etc., placeholder Apt 4B, is nested under it. City and ZIP Code share the last row, New York and 10001.

Use it when a secondary line belongs under the field above it. A flat set of address Input fields skips that nesting. Base UI in React does not look up the ZIP code.

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>Shipping Address</FieldLegend>
  <FieldDescription>Where should we send your order?</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="shipping-street-address">
        Street Address
      </FieldLabel>
      <Input
        id="shipping-street-address"
        placeholder="123 Main St"
        type="text"
      />
    </Field>
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="shipping-apartment-suite-etc">
          Apartment, suite, etc.
        </FieldLabel>
        <Input
          id="shipping-apartment-suite-etc"
          placeholder="Apt 4B"
          type="text"
        />
      </Field>
    </FieldGroup>
    <div className="grid grid-cols-2 gap-4">
      <Field>
        <FieldLabel htmlFor="shipping-city">City</FieldLabel>
        <Input id="shipping-city" placeholder="New York" type="text" />
      </Field>
{/* The rest of the file is under Installation. */}

FAQ

What is the Shipping Address line?

FieldLegend on FieldSet is the caption, in the default legend style. FieldDescription under it reads Where should we send your order?

How is the street field different from the apartment field?

Street Address is a Field in the outer FieldGroup. Apartment, suite, etc. sits in a second FieldGroup nested under that street field.

How do City and ZIP Code share a row?

They sit in a grid with grid-cols-2 and gap-4, still inside the outer FieldGroup. Placeholders are New York and 10001.

What do the inputs accept?

Every Input uses type text. Street's placeholder is 123 Main St, and the apartment placeholder is Apt 4B.

How does each label connect?

FieldLabel names the input. Its htmlFor matches the control's id. The set's legend does not replace those labels.

How wide is the address?

The set is capped with max-w-md. The nested group is another column inside that width.

API Reference

Field

Sets htmlFor="shipping-street-address", htmlFor="shipping-apartment-suite-etc", htmlFor="shipping-city" and htmlFor="shipping-zip-code". The rest is on the Field page.

Input

Sets id="shipping-street-address", placeholder="123 Main St", type="text", id="shipping-apartment-suite-etc", placeholder="Apt 4B" and id="shipping-city". The rest is on the Input page.

All 38 field examples