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. Base UI on React does not convert the amount.
Installation
Anatomy
Usage
<FieldGroup className="max-w-md">
<Field>
<FieldLabel htmlFor="region-language">Language</FieldLabel>
<Select defaultValue="en" items={languages}>
<SelectTrigger className="w-full" id="region-language">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{languages.map((item) => (
<SelectItem key={item.value} value={item.value}>
{item.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel htmlFor="region-currency">Currency</FieldLabel>
<Select defaultValue="usd" items={currencies}>
<SelectTrigger className="w-full" id="region-currency">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{currencies.map((item) => (
<SelectItem key={item.value} value={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 defaultValue to en on Language and usd on Currency.
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
Sets htmlFor="region-language" and htmlFor="region-currency". The rest is on the Field page.
Select
Sets defaultValue="en", items={languages}, id="region-language", value={item.value}, defaultValue="usd" and items={currencies}. The rest is on the Select page.
