Select – Once UI

The Select component offers a dropdown menu for selecting from a list of options. It's built on top of the DropdownWrapper and Input components, providing a consistent user experience with other form controls.

Select

const [selectedCountry, setSelectedCountry] = useState("");

<Select
  id="basic-select"
  label="Choose a country"
  value={selectedCountry}
  options={[
    { label: "United States", value: "us" },
    { label: "Canada", value: "ca" },
    { label: "United Kingdom", value: "uk" },
    { label: "Australia", value: "au" }
  ]}
  onSelect={(country) => setSelectedCountry(country as string)}
/>

Searchable

Enable search functionality to filter options in large lists.

Searchable

const [selectedCountry, setSelectedCountry] = useState("");

<Select
  id="searchable-select"
  label="Choose a country"
  value={selectedCountry}
  searchable
  options={[
    { label: "United States", value: "us" },
    { label: "Canada", value: "ca" },
    { label: "United Kingdom", value: "uk" },
    { label: "Australia", value: "au" },
    { label: "Germany", value: "de" },
    { label: "France", value: "fr" },
    { label: "Japan", value: "jp" },
    { label: "Brazil", value: "br" }
  ]}
  onSelect={(country) => setSelectedCountry(country as string)}
/>

Empty state

Customize the message shown when no options match the search query.

Empty State

const [selectedCountry, setSelectedCountry] = useState("");

<Select
  id="empty-state-select"
  label="Choose a country"
  value={selectedCountry}
  searchable
  emptyState={
    <Text onBackground="neutral-weak">
      No matching countries found
    </Text>
  }
  options={[
    { label: "United States", value: "us" },
    { label: "Canada", value: "ca" },
    { label: "United Kingdom", value: "uk" },
    { label: "Australia", value: "au" }
  ]}
  onSelect={(country) => setSelectedCountry(country as string)}
/>

Multiple selection

Set multiple to allow selecting more than one option. The value and onSelect callbacks receive arrays when multiple mode is enabled.

Multiple selection

const [tags, setTags] = useState<string[]>([]);

<Select
id="tags-select"
label="Tags"
multiple
value={tags}
options={[
  { label: "Design", value: "design" },
  { label: "Engineering", value: "engineering" },
  { label: "Product", value: "product" },
]}
onSelect={(value) => setTags(value as string[])}
/>

size="xxs" draws a 32px field, the height of a size="s" Button, for a filter in a toolbar. The label shows as the placeholder, and a searchable Select opens an xxs search field to match. Every other size keeps the s search field it had.

Toolbar size

const [status, setStatus] = useState("");

<Select
  id="xxs-select"
  size="xxs"
  label="Status"
  searchable
  value={status}
  options={[
    { label: "Paid", value: "paid" },
    { label: "Pending", value: "pending" },
    { label: "Refunded", value: "refunded" }
  ]}
  onSelect={(next) => setStatus(next as string)}
/>

API reference

	Type	Default
optionsrequired The choices, as value and label pairs.	SelectOptionType[]	—
value The selection. An array when multiple is set.	stringstring[]	—
emptyState Shown when a search matches nothing.	ReactNode	No results
onSelect Called with the new selection.	(value: string \| string[]) => void	—
placement Which side the list opens on.	toprightbottomlefttop-starttop-endright-startright-endbottom-startbottom-endleft-startleft-end	—
searchable Add a filter field above the options.	boolean	false
className	string	—
style	React.CSSProperties	—
fillWidth Match the parent's width.	boolean	true
multiple Allow more than one choice.	boolean	false
labels The search field's name and its clear button's, { search, clear }, for a translated interface. Omitted fields stay English.	SelectLabels	—
…and every InputProps prop	inherited	—
…and every DropdownWrapperProps prop	inherited	—
id	string	—
label	string	—
minHeight	SpacingToken	—
minWidth	SpacingToken	—
maxWidth	SpacingToken	—

SelectOptionType

	Type	Default
label	ReactNode	—
value	string	—
onClick	(value: string) => void	—