shadcn.io is an independent project built on shadcn/ui
Two rows, labels beside the controls. Username is a text field, placeholder johndoe. Language already shows English, with Spanish and French in the list.
Use it for a short preferences form where labels share a column. If Language should be searchable, use a Combobox. Neither Svelte nor Ark UI translates these labels.
Installation
Anatomy
Usage
<FieldGroup class="max-w-md"><Field orientation="horizontal"><FieldLabel>Username</FieldLabel><Input placeholder="johndoe" type="text" /></Field><Field orientation="horizontal"><FieldLabel>Language</FieldLabel><Select collection={collection} defaultValue={["en"]}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectGroup>{#each collection.items as item (item.value)}<SelectItem item={item}>{item.label}</SelectItem>{/each}</SelectGroup></SelectContent></Select></Field></FieldGroup>FAQ
How do the labels sit beside the controls?
Both fields set orientation to horizontal inside one FieldGroup. Username is an Input, and Language is a Select, each with its FieldLabel first.
What does the username field accept?
type is text, and the placeholder is johndoe. FieldLabel names the input Username. Field connects the two for you, with no ids to write.
Which language is selected at first?
There is no placeholder, because a value is already selected. The items are English, Spanish, and French.
Set defaultValue to an array containing en.
Where do the language options go?
Each language is a SelectItem. The trigger shows the selected label.
API Reference
Field
Sets orientation="horizontal". The rest is on the Field page.
Input
Sets placeholder="johndoe" and type="text". The rest is on the Input page.
Select
Sets collection={collection}, defaultValue={["en"]} and item={item}. The rest is on the Select page.
