Autocomplete
Type-to-filter combobox built on the same ZyraOption/token foundation as ZyraSelect, with a text input trigger instead of a button.
API
All inputs and configuration options for zyra-autocomplete.
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | 'Search…' | Placeholder text for the input |
size | 'sm' | 'md' | 'lg' | 'md' | Height and font scale |
appearance | 'outline' | 'filled' | 'underline' | 'outline' | Visual style of the input |
noResultsLabel | string | 'No results' | Message shown in the panel when the query matches nothing |
Tokens
CSS custom properties zyra-autocomplete reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Text--zyra-color-select-text | var(--zyra-color-foreground) | Color of the selected value / chip text in the trigger. |
Placeholder--zyra-color-select-placeholder | var(--zyra-color-foreground-subtle) | Color of the placeholder text when nothing is selected. |
Icon--zyra-color-select-icon | var(--zyra-color-foreground-subtle) | Color of the chevron/caret icon. |
Background--zyra-color-select-bg | var(--zyra-color-input-bg) | Fill color of the trigger in the outline/filled appearances. |
Border--zyra-color-select-border | var(--zyra-color-input-border) | Border color of the trigger in its resting state. |
Filled background--zyra-color-select-filled-bg | var(--zyra-color-surface-inset) | Fill color specific to the filled appearance. |
Focus border--zyra-color-select-focus-border | var(--zyra-color-primary) | Border/underline color of the trigger when focused or open. |
Panel background--zyra-color-select-panel-bg | var(--zyra-color-surface-dropdown) | Fill color of the options panel. |
Panel border--zyra-color-select-panel-border | var(--zyra-color-border-color) | Border color of the options panel. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Input uses role="combobox" with aria-autocomplete="list" and aria-expanded
- Panel uses role="listbox"; aria-activedescendant tracks the highlighted match
- Arrow keys move the highlight; Enter selects; Escape closes; Tab dismisses