Combobox
A Select you can type into — single or multiple, with chips that keep their place.
Loading documentation…
Powered by heyo
Combobox is a Select you can type into: an input that
filters as you type, with a chevron for browsing the whole list when you would
rather look than search.
Reach for it the moment a list is long enough that scanning beats scrolling — countries, regions, repositories, people.
With multiple, the chosen values become removable chips inside the
control and the input keeps its place at the end of them. It is the only layout
that survives ten selections without turning into a second row of chrome.
maxChips collapses the rest into a +N.
An option carries everything a row needs: a leading glyph, a second line, and
the heading it belongs under. Rows sharing a group are collected in
first-seen order — no nesting, no sorting on your side.
emptyMessage is what the reader sees when the filter matches nothing. Make it
say what to do next — "No region matches" is better than "No results".
The full list. Each option takes value, label, and optionally
description, icon, group and disabled.
Controlled and uncontrolled selection. With multiple, both are arrays.
Fires with the new selection — a string or null, or an array with
multiple.
Turns the control into chips plus an input.
Beyond this many chips, the rest collapse into +N. multiple only.
Shows a clear control on a single-value combobox. It defaults to true.
Placeholder for the input.
Shown when the filter matches nothing.
Cap on the list height. It defaults to "18rem".
Control height. It defaults to base.
Dims the control and ignores interaction.
Form and accessibility wiring. Give it an aria-label when there is no
visible label.