shadcn.io is an independent project built on shadcn/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 Svelte, Ark UI does not place the call.
Installation
Anatomy
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.
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.
