Autocomplete

Package: @synapse-ui/autocomplete Selector: synapse-autocomplete Status: Stable

A filtered combobox with full keyboard navigation, live filtering, and ControlValueAccessor support.

Overview

Autocomplete renders a text input that filters a flat string[] option list as the user types. Arrow keys navigate the suggestion list; Enter confirms; Escape dismisses. It wires into Angular forms and emits both selection and raw input-change events.

Installation

npm install @synapse-ui/autocomplete @synapse-ui/theme

Basic Example

import { Component } from '@angular/core';
import { Autocomplete } from '@synapse-ui/autocomplete';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Autocomplete],
  template: ` <synapse-autocomplete label="Fruit" [options]="fruits" placeholder="Search fruits..." (selected)="onSelect($event)" /> `,
})
export class DemoComponent {
  fruits = ['Apple', 'Apricot', 'Banana', 'Blueberry', 'Cherry', 'Grape', 'Mango', 'Orange'];

  onSelect(value: string): void {
    console.log('Selected:', value);
  }
}

API Reference

Inputs

Input	Type	Default	Description
options	string[]	[]	Full list of options to filter against
placeholder	string	'Search...'	Input placeholder text
disabled	boolean	false	Disables the input
label	string | undefined	undefined	Visible label above the input
noResultsText	string	'No results found'	Message shown when the filter yields no matches

Outputs

Output	Payload	Description
selected	string	Emitted when the user picks an option from the list
inputChange	string	Emitted on every keystroke (useful for async search)

Keyboard Navigation

Key	Action
ArrowDown	Move focus to the next option
ArrowUp	Move focus to the previous option
Enter	Select the currently highlighted option
Escape	Close the suggestion dropdown

Reactive Forms Example

import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { Autocomplete } from '@synapse-ui/autocomplete';

@Component({
  standalone: true,
  imports: [Autocomplete, ReactiveFormsModule],
  template: ` <synapse-autocomplete label="Framework" [options]="frameworks" [formControl]="frameworkControl" /> `,
})
export class ReactiveFormComponent {
  frameworks = ['Angular', 'React', 'Vue', 'Svelte', 'Solid'];
  frameworkControl = new FormControl('');
}

Async / Server-side Search

Listen to inputChange to trigger server queries and update options dynamically:

onInputChange(query: string): void {
  this.myApiService.search(query).subscribe(results => {
    this.options = results;
  });
}

Accessibility

• Input has role="combobox" with aria-expanded reflecting dropdown state.
• Suggestion list uses role="listbox" with role="option" items.
• aria-activedescendant tracks the currently highlighted option.
• Keyboard navigation is fully supported without mouse interaction.