shadcn.io is an independent project built on shadcn/ui
Department sits above the menu. The menu says Choose department until someone picks. The list is Engineering, Design, Marketing, Sales, Customer Support, and Human Resources. Under it: Select your department or area of work.
It fits a short note that should stay after a choice. If the list should stay open, use a Listbox. In Vue, Ark UI does not assign the department.
Installation
Anatomy
Usage
<Field class="max-w-md">
<FieldLabel>Department</FieldLabel>
<Select :collection="collection">
<SelectTrigger class="w-full">
<SelectValue placeholder="Choose department" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="item in collection.items" :item="item" :key="item.value">
{{ item.label }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<FieldDescription>Select your department or area of work.</FieldDescription>
</Field>FAQ
Where does the helper text sit?
The order is FieldLabel, Select, then FieldDescription. The description reads Select your department or area of work.
What shows before a department is chosen?
The placeholder Choose department shows until an item is selected. It's the placeholder on SelectValue.
Which departments are in the list?
The items are Engineering, Design, Marketing, Sales, Customer Support, and Human Resources, each a SelectItem.
How does the Department label connect?
FieldLabel names the select. Field connects the two for you, with no ids to write. The label text is Department.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Select
Sets collection="collection", placeholder="Choose department", v-for="item in collection.items", item="item" and key="item.value". The rest is on the Select page.
