Inputsnew
Combobox
A filterable autocomplete input. The user can type to narrow down a large list of options.
LlmComboboxDemo
Live PreviewReact
Interactive demo coming soon. See the code example above.
jsx
<LlmCombobox
placeholder="Search framework..."
options={[
{ label: 'Angular', value: 'ng' },
{ label: 'React', value: 'react' },
{ label: 'Vue', value: 'vue' }
]}
/>API (Angular)
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | '' | Controlled value |
onValueChange | (value: string) => void | — | Called when selection changes |
options | LlmComboboxOption[] | [] | Array of { label, value } objects |
placeholder | string | '' | Placeholder text |
disabled | boolean | false | Disables the combobox |
invalid | boolean | false | Applies invalid/error styling |
Import
ts
import { LlmCombobox } from '@atelier-ui/angular';Accessibility
ARIA rolecombobox
| Key | Action |
|---|---|
| Type | Filter the options. The list updates in place. |
| Arrow Down | Open the list (if closed) and focus the first matching option. |
| Arrow Up / Down | Move between filtered options. |
| Enter | Select the highlighted option. |
| Escape | Close the list and clear focus. |
- The input has aria-autocomplete="list" and aria-expanded reflects the open state.
- The list is exposed as aria-activedescendant so screen readers announce the highlighted option without losing text-caret focus.
See the accessibility overview for the site-wide WCAG stance.