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 Svelte 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>{#each languageCollection.items as item (item.value)}<SelectItem item={item}>{item.label}</SelectItem>{/each}</SelectGroup></SelectContent></Select></Field><Field><FieldLabel>Currency</FieldLabel><Select collection={currencyCollection} defaultValue={["usd"]}><SelectTrigger class="w-full"><SelectValue /></SelectTrigger><SelectContent><SelectGroup>{#each currencyCollection.items as item (item.value)}<SelectItem item={item}>{item.label}</SelectItem>{/each}</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"]}, item={item}, collection={currencyCollection} and defaultValue={["usd"]}. The rest is on the Select page.
