shadcn.io is an independent project built on shadcn/ui
Language and Currency stack, labels above the menus. Language opens on English, with Spanish, French, and German. Currency opens on USD ($), with EUR (€), GBP (£), and JPY (¥).
Pick this when related menus should already have an answer. A list that stays open is a Listbox. Ark UI on Vue does not convert the amount.
Installation
Anatomy
Usage
<FieldGroup class="max-w-md">
<Field>
<FieldLabel>Language</FieldLabel>
<Select :collection="languageCollection" :defaultValue='["en"]'>
<SelectTrigger class="w-full"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="item in languageCollection.items" :item="item" :key="item.value">
{{ item.label }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel>Currency</FieldLabel>
<Select :collection="currencyCollection" :defaultValue='["usd"]'>
<SelectTrigger class="w-full"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="item in currencyCollection.items" :item="item" :key="item.value">
{{ item.label }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</Field>
</FieldGroup>FAQ
What groups Language and Currency?
One FieldGroup stacks two Fields, capped with max-w-md. Each field is a FieldLabel and a Select, and neither field sets orientation.
Which values are selected at first?
Language opens on English, and Currency opens on USD. Neither has a placeholder.
Set each defaultValue to an array, one containing en and one containing usd.
What is in each list?
Language items are English, Spanish, French, and German. Currency items are USD, EUR, GBP, and JPY. Each option is a SelectItem.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Select
Sets collection="languageCollection", defaultValue="[en]", v-for="item in languageCollection.items", item="item", key="item.value" and collection="currencyCollection". The rest is on the Select page.
