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 React does not convert the amount.
Installation
Anatomy
Usage
<FieldGroup className="max-w-md">
<Field>
<FieldLabel>Language</FieldLabel>
<Select collection={languageCollection} defaultValue={["en"]}>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{languageCollection.items.map((item) => (
<SelectItem item={item} key={item.value}>
{item.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel>Currency</FieldLabel>
<Select collection={currencyCollection} defaultValue={["usd"]}>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{currencyCollection.items.map((item) => (
<SelectItem item={item} key={item.value}>
{item.label}
</SelectItem>
))}
{/* The rest of the file is under Installation. */}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.
