shadcn.io is an independent project built on shadcn/ui
Priority Level is the label. Next: Higher priority items will be processed first. The menu says Select priority. The list is Low, Medium, High, and Urgent.
Put the guidance here when people should read it before they open the list. Four fixed levels can also be a Segment Group. Vue with Ark UI does not rank the ticket.
Installation
Anatomy
Usage
<Field class="max-w-md">
<FieldLabel>Priority Level</FieldLabel>
<FieldDescription>Higher priority items will be processed first.</FieldDescription>
<Select :collection="collection">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select priority" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="item in collection.items" :item="item" :key="item.value">
{{ item.label }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</Field>FAQ
Why is the helper text above the select?
FieldDescription sits between FieldLabel and Select. It reads Higher priority items will be processed first.
What shows before a priority is chosen?
The placeholder Select priority shows until an item is selected. It's the placeholder on SelectValue.
How does Priority Level connect to the select?
FieldLabel names the select. Field connects the two for you, with no ids to write. The label text is Priority Level.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Select
Sets collection="collection", placeholder="Select priority", v-for="item in collection.items", item="item" and key="item.value". The rest is on the Select page.
