Skip to main content
NeuralUIv1.15.2New
View v2 GitHub
Component

Autocomplete

Text field with filtered suggestion list as you type. Supports disabled options, minimum search length and custom empty state. Implements ControlValueAccessor.

TypeScript
import { NeuAutocompleteComponent } from '@neural-ui/core/autocomplete';
import type { NeuAutocompleteOption } from '@neural-ui/core/autocomplete';

Country search

With minimum length (2 chars)

Virtual scroll

With disabled options

Floating label

Sizes

Small (36px)

Medium (48px, default)

Large (56px)

TypeScript
import { NeuAutocompleteComponent } from '@neural-ui/core/autocomplete';
import { NeuAutocompleteOption } from '@neural-ui/core/autocomplete';

@Component({
  imports: [NeuAutocompleteComponent],
  template: `
    <neu-autocomplete
      [options]="countries"
      label="País"
      placeholder="Escribe para buscar…"
      (optionSelected)="onSelect($event)"
      (queryChange)="onQuery($event)"
    />
  `
})
export class MyComponent {
  countries: NeuAutocompleteOption[] = [
    { value: 'es', label: 'España' },
    { value: 'mx', label: 'México' },
  ];

  onSelect(opt: NeuAutocompleteOption) {
    console.log('Seleccionado:', opt.value);
  }
}