A text input with a filtered listbox popup, following the WAI-ARIA combobox/listbox/option pattern. Reuses `al-dropdown-panel` for the popup surface, `al-list`/`al-list-item` for options, and `al-input` for the field — the same primitives `al-select` and `al-search` are built on — rather than reinventing popover positioning or option rendering.
PLAYGROUND8 CONTROLS
PREVIEW / al-combobox / ALTITUDE
Loading preview
filterMode
align
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
The Figma set changed since the last confirmed sync — the code is behind.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
17 ATTR · 2 SLOT · 4 EVENT · 0 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
PROPERTYDISAGREEMENTCODE / CANVAS
isDisabled[prop] missing-in-canvasisDisabled / —
isError[prop] missing-in-canvasisError / —
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEcombobox--DefaultPASS
Advanced statesAXE7 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
RULEWHEREELEMENTS
color-contrastElements must meet minimum color contrast ratio thresholdscombobox--Disabled1
import '@southleft/al-web-components/components/combobox';
import { ALCombobox } from '@southleft/al-react';
API — 17 PROPS17 DOCUMENTED
PROPTYPEDEFAULT
filterMode'auto' | 'manual'How `items` is filtered as the user types.
- **auto** filters `items` client-side by a case-insensitive substring match on `label`
- **manual** performs no client-side filtering — listen for `onComboboxFilter` and
reassign `items` yourself (e.g. after an async request)'auto'
fieldIdstringThe unique id of the field—
labelstringThe combobox's label'Label'
hideLabelbooleanHide the label?—
valuestringThe current text in the input. Reflects the selected option's label once
an option has been chosen.''
selectedValuestringThe `value` of the currently selected option, if any. `undefined` while
the user is typing a query that doesn't match a committed selection.—
placeholderstringPlaceholder attribute—
noResultsTextstringText shown in the popup when no options match the current query.'No results found'
isActiveDropdownbooleanIs the listbox popup open?—
align'bottom' | 'top'**Combobox alignment**
- **bottom** Popup appears below the field
- **top** Popup appears above the field'bottom'