Skip to content

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

Free

Mixed Field Types with Separators for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not place the call.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Field anatomy: root, label, input, description, error

Usage

<FieldGroup class="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>Phone Number</FieldLabel>
        <Input placeholder="+1 (555) 000-0000" type="tel" />
      </Field>
      <Field>
        <FieldLabel>Email Address</FieldLabel>
        <Input placeholder="you@example.com" type="email" />
      </Field>
    </FieldGroup>
  </FieldSet>
  <FieldSeparator>Additional Details</FieldSeparator>
  <Field>
    <FieldLabel>Additional Information</FieldLabel>
    <Textarea placeholder="Any other details you'd like to share..." :rows="3" />
  </Field>
</FieldGroup>

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. Field connects the two for you, with no ids to write. 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". The rest is on the Field page.

Input

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

Textarea

Sets placeholder="Any other details you'd like to share..." and rows="3". The rest is on the Textarea page.

All 38 field examples