Dropdown

Combobox input — type to filter, pick from a list. Use when the option set is large (>10 items) and the user knows roughly what they want. For small option sets use Select instead. For free-form text, use a regular Input.

a11y (built in): the field is a real combobox — role="combobox" + aria-autocomplete="list" + aria-expanded + aria-controls on the input, role="listbox" / role="option" on the popup, and aria-activedescendant tracking the highlighted row (removed on close), so focus never leaves the input. ↓/↑ open the list and walk it, skipping disabled options; Enter commits the highlighted one and Esc closes; the active row is scrolled into view with block: "nearest", and reopening re-highlights the already-committed option instead of jumping back to the top. The optional clear button is aria-label="Clear" and tabindex="-1", so it never adds a tab stop between the input and the list.

Usage: data-lb-dropdown on the .lb-dropdown-field wrapper auto-inits; options come from the data-lb-options JSON array of { value, label, disabled } or later via el._lbDropdown.setOptions(array). Listen for lb-dropdown-change on the field — detail is the committed option object (empty value / label after the clear button). Write the input programmatically with setValue(), not input.value, so clear-button visibility stays in sync. The power options live on the constructor — new LB.Dropdown(el, { onChange, allowCustom, filterFn, onRender, chunkSize, clearable }) — for custom matching, row decoration and lazy chunked rendering of large lists; clearable and allowCustom can also be flipped on with data-lb-clearable="true" / data-lb-allow-custom="true".


Dropdown Demo

Type to filter options