shadcn.io is an independent project built on shadcn/ui
Two joined fields. The text cannot be edited. The country select starts on US, with UK and EU as well, in front of +1 (555) 123-4567. The protocol select starts on https://, can be http://, and keeps its own selection, in front of example.com. The flags are emoji.
Use this when a value has a fixed second half. For a number someone can type, put an Input in that spot. In React, Ark UI does not treat the phone text as a field.
Installation
Anatomy
Usage
<div className="flex flex-col gap-4">
<ButtonGroup aria-label="Phone number">
<Select
collection={countries}
onValueChange={handleCountryChange}
value={country}
>
<SelectTrigger aria-label="Country" className="bg-background">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{countries.items.map((item) => (
<SelectItem item={item} key={item.value}>
{item.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<ButtonGroupText>+1 (555) 123-4567</ButtonGroupText>
</ButtonGroup>
<ButtonGroup aria-label="Website">
<Select collection={protocols} defaultValue={["https"]}>
<SelectTrigger aria-label="Protocol" className="bg-background">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{protocols.items.map((item) => (
<SelectItem item={item} key={item.value}>
{/* The rest of the file is under Installation. */}FAQ
How is the country select controlled?
The demo keeps the country, starting at us, and updates it when the select changes. Ark's select takes the value as a list, so it starts as ["us"].
Why does the protocol select have no state?
It starts on https with a default value and keeps its own selection. Read it on submit, or control it like the country select.
Is the phone number editable?
No. ButtonGroupText is fixed text that shares the group's border. Put an Input in its place for a real phone or domain field.
How are the selects named?
With aria-label, Country and Protocol, since they have no visible label. The label goes on SelectTrigger.
API Reference
Button Group
Sets aria-label="Phone number" and aria-label="Website". The rest is on the Button Group page.
Select
Sets collection={countries}, onValueChange={handleCountryChange}, value={country}, aria-label="Country", item={item} and collection={protocols}. The rest is on the Select page.
