shadcn.io is an independent project built on shadcn/ui
Personal Information is the caption. First Name and Last Name share a row, placeholders John and Doe. Email is full width, placeholder john@example.com. Country says Select country, with United States, United Kingdom, and Canada.
Reach for it on sign-up or profile forms that mix names with one menu. A country list people can search is a Combobox. Ark UI on Svelte does not fill these in.
Installation
Anatomy
Usage
<FieldSet class="w-full max-w-md"><FieldLegend>Personal Information</FieldLegend><FieldGroup><div class="grid grid-cols-2 gap-4"><Field><FieldLabel>First Name</FieldLabel><Input placeholder="John" type="text" /></Field><Field><FieldLabel>Last Name</FieldLabel><Input placeholder="Doe" type="text" /></Field></div><Field><FieldLabel>Email</FieldLabel><Input placeholder="john@example.com" type="email" /></Field><Field><FieldLabel>Country</FieldLabel><Select collection={collection}><SelectTrigger class="w-full"><SelectValue placeholder="Select country" /></SelectTrigger><SelectContent><SelectGroup>{#each collection.items as item (item.value)}<SelectItem item={item}>{item.label}</SelectItem>{/each}</SelectGroup></SelectContent></Select></Field></FieldGroup></FieldSet>FAQ
What is the Personal Information line?
FieldLegend on FieldSet is the caption, in the default legend style. FieldGroup stacks the rows under it. There is no FieldDescription on the set.
How do First Name and Last Name share a row?
They sit in a grid with grid-cols-2 and gap-4. Both inputs use type text, with placeholders John and Doe.
How is Email different from the name row?
Email is its own full-width Field under the grid. type is email, and the placeholder is john@example.com.
What does the country select show before a choice?
The trigger shows the placeholder Select country. It's the placeholder on SelectValue. The items are United States, United Kingdom, and Canada, each a SelectItem.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Input
Sets placeholder="John", type="text", placeholder="Doe", placeholder="john@example.com" and type="email". The rest is on the Input page.
Select
Sets collection={collection}, placeholder="Select country" and item={item}. The rest is on the Select page.
