Skip to content

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

Free

Mixed Field Types with Separators for React

Contact Information with phone and email, a rule labeled Additional Details, and a three-row Additional Information box.

Contact Information asks How should we get in touch with you? Phone Number is a phone field, placeholder +1 (555) 000-0000. Email Address is an email field, placeholder you@example.com. A rule labeled Additional Details comes before a three-row Additional Information box.

Reach for it when the next part needs a name but not its own caption. A rule with no words is a Separator. On React, Base UI does not place the call.

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="w-full max-w-md">
  <FieldSet>
    <FieldLegend variant="label">Contact Information</FieldLegend>
    <FieldDescription>How should we get in touch with you?</FieldDescription>
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="contact-phone-number">Phone Number</FieldLabel>
        <Input
          id="contact-phone-number"
          placeholder="+1 (555) 000-0000"
          type="tel"
        />
      </Field>
      <Field>
        <FieldLabel htmlFor="contact-email-address">Email Address</FieldLabel>
        <Input
          id="contact-email-address"
          placeholder="you@example.com"
          type="email"
        />
      </Field>
    </FieldGroup>
  </FieldSet>
  <FieldSeparator>Additional Details</FieldSeparator>
  <Field>
    <FieldLabel htmlFor="contact-additional-information">
      Additional Information
    </FieldLabel>
    <Textarea
      id="contact-additional-information"
      placeholder="Any other details you'd like to share..."
{/* The rest of the file is under Installation. */}

FAQ

What is the Additional Details line?

FieldSeparator takes Additional Details as its child, so that label sits on the rule between the contact set and the textarea. The separator sets data-content when it has a child.

What is the Contact Information line?

FieldDescription under the caption reads How should we get in touch with you? Phone and email are Fields in a nested FieldGroup. The caption is a FieldLegend with variant set to label.

Why are the contact inputs tel and email?

Phone Number uses type tel, with placeholder +1 (555) 000-0000. Email Address uses type email, with placeholder you@example.com.

How tall is the additional information box?

The Textarea sets rows to 3. Its label is Additional Information, and the placeholder is Any other details you'd like to share.

How do the labels connect?

FieldLabel names that control. Its htmlFor matches the control's id. The section caption does not replace Phone Number, Email Address, or Additional Information.

How wide is the form?

The form is capped with max-w-md. The contact inputs stack inside the set, then the separator, then the textarea.

API Reference

Field

Sets variant="label", htmlFor="contact-phone-number", htmlFor="contact-email-address" and htmlFor="contact-additional-information". The rest is on the Field page.

Input

Sets id="contact-phone-number", placeholder="+1 (555) 000-0000", type="tel", id="contact-email-address", placeholder="you@example.com" and type="email". The rest is on the Input page.

Textarea

Sets id="contact-additional-information", placeholder="Any other details you'd like to share..." and rows={3}. The rest is on the Textarea page.

All 38 field examples