FormBrowse form components
Combobox
Typeahead with floating listbox. Supports option metadata column.
Live preview
- Atlas Finance
- Atlas Health
Usage
Adapters:React stableVue stable
index.html
<div class="lm-combobox">
<input class="lm-input" role="combobox" aria-controls="lb" aria-expanded="true" />
<ul class="lm-combobox-listbox" role="listbox" id="lb">
<li class="lm-combobox-option" role="option" aria-selected="true">…</li>
</ul>
</div>CSS classes (4)
| Class | Description |
|---|---|
lm-combobox | Position-relative wrapper |
lm-combobox-listbox | Floating options list |
lm-combobox-option | Each option |
lm-combobox-option-meta | Right-aligned meta text |
React props (3)
| Prop | Type | Default | Description |
|---|---|---|---|
options | Option[] | — | — |
value | string | — | — |
onValueChange | (value: string) => void | — | — |
Accessibility
- role='combobox' on input, aria-controls=listbox-id, aria-expanded.
- role='listbox' + role='option' with aria-selected.
- Up/Down arrow + Enter + Escape keyboard.
Spotted something wrong? Edit this entry on GitHub.