SearchSelect

Picks one of many — a studio among hundreds — where a Select's list would run long. A field like Select's that opens a search over the options, typed into at once; the search is the house Input. Over the vendored Base UI combobox. On a phone it opens as a bottom sheet.

Playground

SearchSelect

Finding an option

Every word typed must be somewhere in the option's label or its keywords, in any order, any case, accents or not: “studio kr” finds Štúdio Krása, and so does its slug.

A figure on each row

A row can carry one short figure at its end — what each studio spent — small and quiet, in tabular numerals so they line up.

Beside a Select

The same field as Select — its surface, edge, heights, chevron — so the two read as one kind in a row. Only the open list differs: a search over it.

On a phone, a sheet

Under sm the search opens as a bottom sheet (Sheet), as a Select's list does: the full width, the search at the top with the keyboard up, standing on it, rows 44px tall and the list scrolling in what's left. Narrow this window to see it.

API

PropTypeDefaultDescription
itemsSearchOption[]—The options: value, label, and optionally detail and keywords.
valuestring—The chosen option's value. One not in items shows the placeholder.
onValueChange(value: string) => void—Called with the picked option's value.
size"sm" | "md" | "lg""md"32, 36 or 40px: the heights of Button and Select.
placeholderstring"Choose"In the field with nothing chosen.
searchPlaceholderstring"Search"In the search box, and its accessible name.
emptystring"Nothing matches"In the list when nothing matches.
aria-labelstring—Names the field when no label sits beside it.
classNamestring—Layout only — a width.

Rules

  • Past a dozen options, or a list that grows with use, use SearchSelect; under that, Select.
  • Put a way out first when there is one — “All studios” — so it’s never a search away.
  • A figure is one short value, the same kind on every row; never a sentence.