shadcn.io is an independent project built on shadcn/ui
Two fields, labels above the inputs. Name is text, placeholder Your name, then This will be displayed publicly. Email is an email field, placeholder you@example.com, then We'll never share your email.
This is the default when the form reads top to bottom at any width. A lone email with no note is an Input. In React, Ark UI does not publish the name.
Installation
Anatomy
Usage
<FieldGroup className="max-w-md">
<Field>
<FieldLabel>Name</FieldLabel>
<Input placeholder="Your name" type="text" />
<FieldDescription>This will be displayed publicly.</FieldDescription>
</Field>
<Field>
<FieldLabel>Email</FieldLabel>
<Input placeholder="you@example.com" type="email" />
<FieldDescription>We'll never share your email.</FieldDescription>
</Field>
</FieldGroup>FAQ
What makes this layout vertical?
Neither Field sets orientation, so both stay at the default vertical. The label stacks over the input, and FieldDescription follows the input.
What does each description say?
Name's description reads This will be displayed publicly. Email's description reads We'll never share your email.
What are the two inputs?
Name is type text with placeholder Your name. Email is type email with placeholder you@example.com.
How do the labels connect?
Each FieldLabel inside its Field names that input. The labels are Name and Email.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Input
Sets placeholder="Your name", type="text", placeholder="you@example.com" and type="email". The rest is on the Input page.
