Autocomplete
Searchable option picker with keyboard navigation, optional clear action, and CVA support.
Keyboard: ArrowUp, ArrowDown, Enter, Escape. Closes on outside click and supports disabled, clearable, and loading states.
Basic Usage
Quick Pick
Great for command menus, owner pickers, or lightweight search-and-select flows. Includes option descriptions and a clearable control.
Selected value: (none)
Reactive FormControl
Full CVA support — set an initial value via FormControl and read back the selected value programmatically.
Form value: design
Required Field
Form value: (none)
Text Highlight
Highlighted Matches
Enable [highlight]="true" to bold the matching portion of each option label as the user types.
Fuzzy Search
Basic Fuzzy Search
Use [blocAutocompleteFuzzySearch] to enable fuzzy matching. Try typing abbreviations like 'usa', 'uk', or 'euro' — they'll match even if not exact.
Advanced Fuzzy Config
Configure threshold (0=perfect match, 1=match anything), case sensitivity, and minimum match length for fine-tuned control.
States
Disabled
Disables click, keyboard interaction, and form participation. Works via [disabled]="true" or a FormControl with disabled: true.
Loading
[loading]="true" replaces the option list with a status message — ideal while fetching async data. An empty query also demonstrates the no-results state.
Theming
Custom Token
Override colours via CSS custom properties — works without a theme package.