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);
}
}