Select
A single-choice dropdown with sticky group labels — composed, or built from data in one line.
Loading documentation…
Powered by heyo
Select picks one value from a known list. Groups rule themselves off and
their labels stick while you scroll, so a long list never loses its headings.
The popup caps at 18rem — or the space available, whichever is smaller — and
scrolls past that.
It does not lock the page. modal defaults to false, unlike Base UI:
picking a value from a list is not a modal task, and freezing the application
behind one is both surprising and, if the unlock ever misses, permanent.
items builds the list, and a nested items array becomes a titled group —
the same markup the example above writes by hand.
The trigger takes the four control heights, and the whole thing drops into a
Field when it needs a label.
Where the deploy lands.
Pass multiple and the value becomes an array. For more than a handful of
options — or anything worth typing to find — use
Combobox instead.
Controlled and uncontrolled selection. With multiple, both are arrays.
Fires when the selection changes.
Allows several values.
Whether the open list locks the page. It defaults to false, unlike Base
UI.
Standard form behaviour, passed through to Base UI.
Shown when nothing is selected.
Control height. It defaults to base.
Replaces the rendered value — pass Select.Value with a renderer for
anything custom.
Shorthand. An entry is { value, label, disabled }, or
{ label, items } for a titled group.
Cap on the popup height. It defaults to 18rem; anything taller scrolls.
Gap between the trigger and the popup.
Placement overrides.
One option. The check mark is drawn for you.
A titled section. It draws its own top rule, so consecutive groups separate
themselves — no manual Select.Separator between them.
A rule, for the rare case a group is not what you want.
The rendered value inside the trigger, when you need to format it.