shadcn.io is an independent project built on shadcn/ui
Timezone is the label. The menu says Select timezone. North America holds Eastern Time, Central Time, Mountain Time, and Pacific Time. Europe holds London, Central Europe, and Eastern Europe. Under the menu: Choose your local timezone.
Save it when headings make a long list easier to scan. Headings are not choices. Typing to filter belongs on a Combobox. Ark UI on Vue does not guess the zone.
Installation
Anatomy
Usage
<Field class="max-w-md">
<FieldLabel>Timezone</FieldLabel>
<Select :collection="collection">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select timezone" />
</SelectTrigger>
<SelectContent>
<SelectGroup heading="North America">
<SelectItem v-for="item in northAmerica" :item="item" :key="item.value">
{{ item.label }}
</SelectItem>
</SelectGroup>
<SelectGroup heading="Europe">
<SelectItem v-for="item in europe" :item="item" :key="item.value">
{{ item.label }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<FieldDescription>Choose your local timezone.</FieldDescription>
</Field>FAQ
How are the timezones split into regions?
Two SelectGroups divide the list. North America holds Eastern, Central, Mountain, and Pacific. Europe holds London, Central Europe, and Eastern Europe.
The region name is the heading on SelectGroup.
What shows before a timezone is chosen?
The placeholder Select timezone shows until an item is selected. It's the placeholder on SelectValue.
Where is the helper text?
FieldDescription comes after the Select and reads Choose your local timezone. FieldLabel above the select is Timezone.
How does the Timezone label connect?
FieldLabel names the select. Field connects the two for you, with no ids to write. The group headings organize the items under that label.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Select
Sets collection="collection", placeholder="Select timezone", heading="North America", v-for="item in northAmerica", item="item" and key="item.value". The rest is on the Select page.
