Select

Dropdown for choosing one option from a predefined list. Use when you have a moderate number of options (5–30) and a single value to pick. MultiSelect, further down this page, takes several values and adds an optional search field under data-lb-filterable. For a type-to-filter field, use Dropdown — both are role=combobox, but Dropdown's trigger is a text input. For free text, use Input. Sizes: small, medium.

a11y (built in): the trigger is a real button wired as role=combobox + aria-haspopup=listbox + aria-expanded + aria-controls; the popup is a role=listbox of role=option items carrying aria-selected, and the roaming highlight is published as aria-activedescendant — focus stays on the trigger throughout and is returned there on every close path. ↑/↓/Enter/Space open, ↑/↓ roam past disabled options, Home/End jump, Enter/Space select, Esc closes. MultiSelect puts role=combobox + aria-haspopup=listbox + aria-expanded on a tabindex=0 element (a button would nest the pill remove buttons illegally), adds aria-multiselectable, gives every pill remove button an aria-label, and under data-lb-filterable moves focus into the search input, where LB.List owns arrow/Home/End/Enter.

Default

Custom-styled select with full keyboard support: ↑/↓ roam, Enter selects, Esc closes, Home/End jump. Pass options via data-lb-options as a JSON array of {value, label} pairs.

Small

Compact size for toolbars and filter rows. Set data-lb-size="small". Individual options can be disabled with "disabled": true in the option object.

MultiSelect

Multi-value form field. Selected items appear as removable pills inside the field. Popup shows a checkbox list (.lb-list--multi-select) for picking. Use for tag inputs, filter facets, team-member assignment, category pickers. For a single value, use the Select above; for free-form text, use Input.

Usage: <div class="lb-multi-select-field" data-lb-multi-select data-lb-options='[...]'>. Optional data-lb-filterable for search input; data-lb-sort-selected to float selected items to the top on open. Dispatches lb-multi-select-change with { values, toggled }.

Default

Click the field to open. Ticking an option adds a pill; the X on a pill removes the value.

With filter + sort-selected

Long option set: enable search (data-lb-filterable) + selected-first sort (data-lb-sort-selected). Selected items rise to the top on open with a separator; order stays stable while you pick.

Small size

Dense contexts — toolbars, filter bars, dashboard widgets.