Autocomplete | Neural UI v2

Uso

Autocomplete separa el texto de búsqueda del valor seleccionado. En el modo strict el usuario selecciona una sugerencia disponible; free-text también acepta texto que no está en la colección.

El ejemplo responde a queryChange de forma síncrona y proporciona las sugerencias coincidentes. Con datos remotos, atiende suggestionsRequest y entrega la respuesta mediante suggestions; el texto buscado no equivale a una selección confirmada.

Signal Forms

Enlaza FormField al control que gestiona el valor y añade required al esquema del formulario. Selecciona un destino, sal del campo para marcarlo como visitado y restablécelo para comprobar el valor y la validación. La marca de obligatorio no valida por sí sola el formulario.

Guía de Signal Forms

Destino

Valor: — · Válido: false

Prueba y configura

Cambia las opciones e interactúa con el control. La vista previa, el valor de la aplicación y el template generado permanecen juntos. Un destino deshabilitado permite comprobar que no se pueden seleccionar opciones no disponibles.

Vista previa

Destino

Valor actual de la aplicación

Template generado: refleja las opciones anteriores. Los imports y el estado están en la pestaña Código.

<neu-autocomplete
  [options]="destinations"
  [suggestions]="suggestions()"
  (queryChange)="query.set($event)"
  (suggestionsRequest)="refreshSuggestions($event.query)"
  [(value)]="destination"
  [dropdown]="true"
  [clearAriaLabel]="'Limpiar selección'"
  [delay]="0"
  [dropdownAriaLabel]="'Mostrar destinos'"
  [emptyLabel]="'Sin coincidencias'"
  [floatingLabel]="true"
  [fluid]="true"
  [label]="'Destino'"
  [listAriaLabel]="'Destino'"
  [loadingLabel]="'Cargando destinos'"
  [placeholder]="'Elige un destino'"
/>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

import { signal } from '@angular/core';

export const destinations = [
  {
    "value": "madrid",
    "label": "Madrid"
  },
  {
    "value": "lisbon",
    "label": "Lisboa"
  },
  {
    "value": "paris",
    "label": "París"
  },
  {
    "value": "rome",
    "label": "Roma",
    "disabled": true
  }
];

export const suggestions = signal([
  {
    "value": "madrid",
    "label": "Madrid"
  },
  {
    "value": "lisbon",
    "label": "Lisboa"
  },
  {
    "value": "paris",
    "label": "París"
  },
  {
    "value": "rome",
    "label": "Roma",
    "disabled": true
  }
]);

export const destination = signal(null);

Inputs de datos, callbacks y configuración estructurada

Estos inputs requieren un modelo o función, no un checkbox. Modifica el campo del mismo nombre en el componente de Código y enlázalo al template; los datos que ya usa esta vista previa se muestran en el estado anterior.

compareWith · (left: V, right: V) => boolean

En Código: define compareWith con este tipo y utiliza [compareWith]="compareWith" (o compareWith() si es una signal).

errors · readonly ValidationError.WithOptionalFieldTree[]

En Código: define errors con este tipo y utiliza [errors]="errors" (o errors() si es una signal).

filterConfig · Readonly<NeuOptionFilterConfig<T>>

En Código: define filterConfig con este tipo y utiliza [filterConfig]="filterConfig" (o filterConfig() si es una signal).

groupConfig · NeuOptionGroupConfig<T, G> | null

En Código: define groupConfig con este tipo y utiliza [groupConfig]="groupConfig" (o groupConfig() si es una signal).

groups · readonly G[]

En Código: define groups con este tipo y utiliza [groups]="groups" (o groups() si es una signal).

groupSuggestions · readonly G[] | null

En Código: define groupSuggestions con este tipo y utiliza [groupSuggestions]="groupSuggestions" (o groupSuggestions() si es una signal).

optionDisabled · NeuOptionDisabledAccessor<T> | null

En Código: define optionDisabled con este tipo y utiliza [optionDisabled]="optionDisabled" (o optionDisabled() si es una signal).

optionLabel · NeuOptionLabelAccessor<T> | null

En Código: define optionLabel con este tipo y utiliza [optionLabel]="optionLabel" (o optionLabel() si es una signal).

options · readonly T[]

En Código: define options con este tipo y utiliza [options]="options" (o options() si es una signal).

optionValue · NeuOptionValueAccessor<T, V> | null

En Código: define optionValue con este tipo y utiliza [optionValue]="optionValue" (o optionValue() si es una signal).

pattern · readonly RegExp[]

En Código: define pattern con este tipo y utiliza [pattern]="pattern" (o pattern() si es una signal).

value · NeuAutocompleteValue<V, F>

En Código: define value con este tipo y utiliza [value]="value" (o value() si es una signal).

Valor y eventos

Usa una sola fuente de verdad: [(value)]="destination" o [value]="destination()" junto con (valueChange)="destination.set($event)". No combines las dos formas de enlace.

Los Inputs configuran el control. valueChange sincroniza su modelo; los demás Outputs comunican las acciones o fases documentadas. Las solicitudes de sugerencias, hijos o ventanas remotas requieren que la aplicación proporcione los datos.

Accesibilidad y teclado

Utiliza una etiqueta visible o un nombre accesible. Prueba la navegación por teclado, las opciones deshabilitadas, la selección y el cierre del panel. Los templates de opción deben conservar texto descriptivo y no introducir botones ni otro checkbox enfocable dentro de la opción.

Tecla	Acción
`Tab`	Mueve el foco hacia dentro o fuera del control.
`ArrowDown / ArrowUp`	Mueve la opción activa entre las opciones disponibles.
`Enter`	Activa la opción enfocada.
`Escape`	Cierra el panel sin seleccionar otra opción.

API

La referencia muestra los Inputs, modelos, Outputs y Templates públicos del paquete de Core fijado. Pulsa un tipo con nombre para abrir su definición. Cada Template aplicable tiene un ejemplo ejecutable y su código real.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`ariaDescribedBy`	`string \| null`	`null`	`[ariaDescribedBy]`	IDs de los elementos que describen el control, separados por espacios.
`ariaLabel`	`string \| null`	`null`	`[ariaLabel]`	Nombre accesible cuando no hay una etiqueta visible.
`ariaLabelledBy`	`string \| null`	`null`	`[ariaLabelledBy]`	ID del elemento que proporciona el nombre accesible.
`autocomplete`	`string`	`'off'`	`[autocomplete]`	Atributo autocomplete del navegador para el input.
`autofocus`	`boolean`	`false`	`[autofocus]`	Solicita el foco cuando se inicializa el control.
`autoHighlight`	`boolean`	`false`	`[autoHighlight]`	Resalta automáticamente la primera sugerencia disponible.
`autoOptionFocus`	`boolean`	`false`	`[autoOptionFocus]`	Activa una opción disponible al abrir la lista.
`clearable`	`boolean`	`true`	`[clearable]`	Muestra la acción de limpiar cuando hay un valor seleccionado.
`clearAriaLabel`	`string`	`'Clear value'`	`[clearAriaLabel]`	Nombre accesible del botón para limpiar la selección.
`compareWith`	`(left: V, right: V) => boolean`	`Object.is`Valor derivado	`[compareWith]`	Función para comparar valores seleccionados; utiliza una identidad de dominio estable.
`completeOnFocus`	`boolean`	`false`	`[completeOnFocus]`	Solicita sugerencias cuando el input recibe el foco.
`dataFirst`	`number`	`0`	`[dataFirst]`	Índice lógico de la primera opción cargada en una ventana remota.
`delay`	`number`	`300`	`[delay]`	Espera en milisegundos antes de solicitar sugerencias.
`dirty`	`boolean`	`false`	`[dirty]`	Estado del formulario que indica que el usuario ha cambiado el valor.
`disabled`	`boolean`	`false`	`[disabled]`	Deshabilita la interacción del usuario; las opciones deshabilitadas no se pueden seleccionar.
`dropdown`	`boolean`	`false`	`[dropdown]`	Muestra un botón que abre o solicita sugerencias.
`dropdownAriaLabel`	`string`	`'Show suggestions'`	`[dropdownAriaLabel]`	Nombre accesible del botón de sugerencias.
`dropdownMode`	`NeuAutocompleteDropdownMode`	`'blank'`	`[dropdownMode]`	Usa la consulta actual o una consulta vacía al pulsar el desplegable.
`emptyLabel`	`string`	`'No results'`	`[emptyLabel]`	Mensaje que se muestra cuando no hay opciones disponibles.
`emptySelectionMessage`	`string`	`'No selected item'`	`[emptySelectionMessage]`	Anuncio cuando no hay ninguna opción seleccionada.
`errorMessage`	`string`	`''`	`[errorMessage]`	Mensaje de error visible asociado al campo.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Errores de validación proporcionados por el formulario o la aplicación.
`filterConfig`	`Readonly<NeuOptionFilterConfig<T>>`	`{}`	`[filterConfig]`	Campos, modo de comparación, idioma y estrategia de filtrado local o remoto.
`floatingLabel`	`boolean`	`false`	`[floatingLabel]`	Muestra la etiqueta con el estilo de campo float label.
`fluid`	`boolean`	`false`	`[fluid]`	Hace que el control ocupe el ancho de su contenedor.
`focusOnHover`	`boolean`	`true`	`[focusOnHover]`	Cambia la opción activa cuando el puntero entra en una opción.
`groupConfig`	`NeuOptionGroupConfig<T, G> \| null`	`null`	`[groupConfig]`	Accessors que leen las etiquetas, hijos y estado deshabilitado de los grupos.
`groups`	`readonly G[]`	`[]`	`[groups]`	Opciones agrupadas, con sus elementos hijos definidos mediante groupConfig.
`groupSuggestions`	`readonly G[] \| null`	`null`	`[groupSuggestions]`	Activa la presentación de sugerencias agrupadas.
`hidden`	`boolean`	`false`	`[hidden]`	Oculta el control según el estado del formulario.
`hint`	`string`	`''`	`[hint]`	Texto de ayuda asociado al campo.
`id`	`string \| null`	`null`	`[id]`	Identificador del contenedor del control.
`inputId`	`string \| null`	`null`	`[inputId]`	Identificador del input nativo para asociar etiquetas y accesibilidad.
`inputSize`	`number \| null`	`null`	`[inputSize]`	Atributo size del input nativo, independiente del tamaño visual.
`invalid`	`boolean`	`false`	`[invalid]`	Muestra el estado inválido; no añade una regla de validación.
`label`	`string`	`''`	`[label]`	Etiqueta visible del campo o de la opción.
`lazy`	`boolean`	`false`	`[lazy]`	Usa ventanas cargadas y emite solicitudes de los datos de opciones que faltan.
`listAriaLabel`	`string`	`'Suggestions'`	`[listAriaLabel]`	Nombre accesible de la lista de sugerencias.
`loading`	`boolean`	`false`	`[loading]`	Muestra el estado de carga mientras la aplicación proporciona datos.
`loadingLabel`	`string`	`'Loading...'`	`[loadingLabel]`	Mensaje o anuncio durante la carga de opciones.
`maxLength`	`number \| undefined`	`undefined`	`[maxLength]`	Longitud máxima del texto del input nativo.
`minLength`	`number \| undefined`	`undefined`	`[minLength]`	Longitud mínima del texto del input nativo.
`minQueryLength`	`number`	`0`	`[minQueryLength]`	Longitud mínima de la consulta para solicitar sugerencias.
`mode`	`F`	`'strict' as F`Valor derivado	`[mode]`	strict selecciona una sugerencia disponible; free-text también acepta texto libre.
`name`	`string`	`''`	`[name]`	Nombre asociado al control nativo del formulario.
`optionDisabled`	`NeuOptionDisabledAccessor<T> \| null`	`null`	`[optionDisabled]`	Nombre de campo o función que indica si una opción está deshabilitada.
`optionLabel`	`NeuOptionLabelAccessor<T> \| null`	`null`	`[optionLabel]`	Nombre de campo o función que obtiene la etiqueta visible de la opción.
`options`	`readonly T[]`	`[]`	`[options]`	Registros de opciones cargados. Los accessors permiten usar tus propios objetos de dominio.
`optionValue`	`NeuOptionValueAccessor<T, V> \| null`	`null`	`[optionValue]`	Nombre de campo o función que obtiene el valor guardado de la opción.
`pattern`	`readonly RegExp[]`	`[]`	`[pattern]`	Atributo pattern del input de texto nativo.
`pending`	`boolean`	`false`	`[pending]`	Estado del formulario que indica que hay una validación asíncrona pendiente.
`placeholder`	`string`	`''`	`[placeholder]`	Texto que se muestra cuando el campo no tiene un valor seleccionado.
`readonly`	`boolean`	`false`	`[readonly]`	Mantiene el valor visible sin permitir que el usuario lo cambie.
`required`	`boolean`	`false`	`[required]`	Marca el campo como obligatorio; utiliza un validador del formulario para exigirlo.
`scrollHeight`	`string`	`'240px'`	`[scrollHeight]`	Altura máxima del área visible de opciones.
`searchMessage`	`string \| null`	`null`	`[searchMessage]`	Anuncio accesible que describe el número de resultados.
`selectionMessage`	`string`	`'{0} item selected'`	`[selectionMessage]`	Anuncio accesible que describe la opción seleccionada.
`selectOnFocus`	`boolean`	`false`	`[selectOnFocus]`	Selecciona la opción al mover el foco, sin esperar a su activación.
`showEmptyMessage`	`boolean`	`true`	`[showEmptyMessage]`	Muestra el mensaje de sugerencias vacías.
`size`	`NeuAutocompleteSize`	`'md'`	`[size]`	Tamaño visual del campo: sm, md o lg.
`suggestions`	`readonly T[] \| null`	`null`	`[suggestions]`	Registros de sugerencias proporcionados para la consulta actual.
`tabindex`	`number`	`0`	`[tabindex]`	Orden de tabulación del punto de entrada por teclado.
`totalItems`	`number \| null`	`null`	`[totalItems]`	Número total lógico de opciones en las ventanas remotas.
`touched`	`boolean`	`false`	`[touched]`	Estado del formulario que indica que el control ha sido visitado.
`type`	`string`	`'text'`	`[type]`	Tipo del input de texto nativo.
`variant`	`NeuAutocompleteVariant`	`'outline'`	`[variant]`	Variante visual del campo: outline o solid.
`virtualScroll`	`boolean`	`false`	`[virtualScroll]`	Renderiza una ventana de opciones en lugar de todas las opciones.
`virtualScrollBuffer`	`number`	`3`	`[virtualScrollBuffer]`	Opciones adicionales renderizadas antes y después de la ventana virtual visible.
`virtualScrollItemSize`	`number \| null`	`null`	`[virtualScrollItemSize]`	Altura de cada fila de opción en píxeles para el scroll virtual.
`virtualScrollVisibleItems`	`number`	`8`	`[virtualScrollVisibleItems]`	Número de filas virtuales visibles.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`value`	`NeuAutocompleteValue<V, F>`	`null as NeuAutocompleteValue<V, F>`Valor derivado	`[(value)]`	Valor confirmado o null; free-text también acepta un string. queryChange comunica el texto buscado.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`cleared`	`NeuAutocompleteClearEvent<V, F>`	`(cleared)="onCleared($event)"`	Se emite con la acción explícita de limpiar; valueChange comunica el valor resultante.
`closed`	`void`	`(closed)="onClosed($event)"`	Se emite después de cerrar el panel en el navegador.
`dropdownClick`	`NeuAutocompleteDropdownClickEvent`	`(dropdownClick)="onDropdownClick($event)"`	Describe la consulta y el origen de la acción del botón de sugerencias.
`focusEntered`	`FocusEvent`	`(focusEntered)="onFocusEntered($event)"`	Se emite cuando el foco entra en el control.
`focusLeft`	`FocusEvent`	`(focusLeft)="onFocusLeft($event)"`	Se emite cuando el foco sale del control.
`inputKeydown`	`KeyboardEvent`	`(inputKeydown)="onInputKeydown($event)"`	Evento keydown nativo del input de texto.
`keyUp`	`KeyboardEvent`	`(keyUp)="onKeyUp($event)"`	Evento keyup nativo del input de texto.
`opened`	`void`	`(opened)="onOpened($event)"`	Se emite después de abrir el panel en el navegador.
`optionActivated`	`NeuOptionActivatedEvent<T, V>`	`(optionActivated)="onOptionActivated($event)"`	Opción activada, su valor y el evento que la ha activado.
`queryChange`	`string`	`(queryChange)="onQueryChange($event)"`	Consulta de texto actual, distinta del valor seleccionado.
`suggestionsRequest`	`NeuAutocompleteSuggestionsRequest`	`(suggestionsRequest)="onSuggestionsRequest($event)"`	Solicita sugerencias con consulta e identidad de solicitud; la aplicación proporciona suggestions.
`touch`	`void`	`(touch)="onTouch($event)"`	Notifica al formulario que el control ha sido visitado; no es un cambio de valor.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`NeuAutocompleteClearIconDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuAutocompleteClearIcon]`
`NeuAutocompleteDropdownIconDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuAutocompleteDropdownIcon]`
`NeuAutocompleteEmptyDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuAutocompleteEmpty]`
`NeuAutocompleteFooterDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuAutocompleteFooter]`
`NeuAutocompleteGroupDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuAutocompleteGroup]`
`NeuAutocompleteHeaderDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuAutocompleteHeader]`
`NeuAutocompleteItemDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuAutocompleteItem]` template.d.ts `import type { NeuAutocompleteOption } from '@neural-ui/core/autocomplete'; import { NeuAutocompleteItemDirective } from '@neural-ui/core/autocomplete'; // Declaración pública (solo referencia) export declare class NeuAutocompleteItemDirective<T = NeuAutocompleteOption, V = unknown> { readonly neuAutocompleteItem: import("@angular/core").InputSignal<"" \| readonly T[]>; }`
`NeuAutocompleteLoaderDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuAutocompleteLoader]`
`NeuAutocompleteLoadingIconDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuAutocompleteLoadingIcon]`

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Template ClearIcon

NeuAutocompleteClearIconDirective

Usa el botón desplegable o escribe para abrir las sugerencias.

Destino

Template Empty

NeuAutocompleteEmptyDirective

Abre el control para ver el estado vacío.

Destino

Template Group

NeuAutocompleteGroupDirective

Usa el botón desplegable o escribe para abrir las sugerencias.

Destino

Template Header

NeuAutocompleteHeaderDirective

Usa el botón desplegable o escribe para abrir las sugerencias.

Destino

Template Item

NeuAutocompleteItemDirective

Usa el botón desplegable o escribe para abrir las sugerencias.

Destino

Template Loader

NeuAutocompleteLoaderDirective

Usa el botón desplegable o escribe para abrir las sugerencias.

Destino

Template LoadingIcon

NeuAutocompleteLoadingIconDirective

Usa el botón desplegable o escribe para abrir las sugerencias.

Destino

Métodos públicos

Nombre	Contrato
`clear`	`clear(originalEvent?: Event \| null, reason?: 'button' \| 'force-selection' \| 'programmatic'): void;`
`close`	`close(originalEvent?: Event \| null, reason?: OverlayReason, restoreFocus?: boolean): void;`
`focus`	`focus(): void;`
`open`	`open(originalEvent?: Event \| null, reason?: OverlayReason): void;`
`openAll`	`openAll(event?: Event \| null): void;`
`reset`	`reset(): void;`
`selectOption`	`selectOption(option: T, originalEvent?: Event \| null): void;`

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuAutocompleteClearEventTypeScript

import type { NeuAutocompleteMode } from '@neural-ui/core/autocomplete';
import type { NeuAutocompleteValue } from '@neural-ui/core/autocomplete';

import type { NeuAutocompleteClearEvent } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export interface NeuAutocompleteClearEvent<V, F extends NeuAutocompleteMode = 'strict'> {
  readonly originalEvent: Event | null;
  readonly previousText: string;
  readonly previousValue: NeuAutocompleteValue<V, F>;
  readonly reason: 'button' | 'input' | 'force-selection' | 'programmatic';
}

NeuAutocompleteCompleteEventTypeScript

import type { NeuAutocompleteCompletionSource } from '@neural-ui/core/autocomplete';

import type { NeuAutocompleteCompleteEvent } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export interface NeuAutocompleteCompleteEvent {
  readonly originalEvent: Event | null;
  readonly query: string;
  readonly requestId: number;
  readonly source: NeuAutocompleteCompletionSource;
}

NeuAutocompleteCompletionSourceTypeScript

import type { NeuAutocompleteCompletionSource } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export type NeuAutocompleteCompletionSource = 'input' | 'focus' | 'dropdown' | 'programmatic';

NeuAutocompleteDropdownClickEventTypeScript

import type { NeuAutocompleteDropdownMode } from '@neural-ui/core/autocomplete';

import type { NeuAutocompleteDropdownClickEvent } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export interface NeuAutocompleteDropdownClickEvent {
  readonly mode: NeuAutocompleteDropdownMode;
  readonly originalEvent: Event;
  readonly query: string;
}

NeuAutocompleteDropdownModeTypeScript

import type { NeuAutocompleteDropdownMode } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export type NeuAutocompleteDropdownMode = 'blank' | 'current';

NeuAutocompleteGroupContextTypeScript

import type { NeuOptionGroupTemplateContext } from '@neural-ui/core/option-api';

import type { NeuAutocompleteGroupContext } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export type NeuAutocompleteGroupContext<G> = NeuOptionGroupTemplateContext<G>;

NeuAutocompleteIconContextTypeScript

import type { NeuAutocompleteIconContext } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export interface NeuAutocompleteIconContext {
  readonly $implicit: boolean;
  readonly active: boolean;
}

NeuAutocompleteItemContextTypeScript

import type { NeuOptionTemplateContext } from '@neural-ui/core/option-api';

import type { NeuAutocompleteItemContext } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export interface NeuAutocompleteItemContext<T, V = unknown> extends NeuOptionTemplateContext<T> {
  readonly label: string;
  readonly value: V;
}

NeuAutocompleteLoaderContextTypeScript

import type { NeuOptionLoaderTemplateContext } from '@neural-ui/core/option-api';

import type { NeuAutocompleteLoaderContext } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export type NeuAutocompleteLoaderContext = NeuOptionLoaderTemplateContext;

NeuAutocompleteModeTypeScript

import type { NeuAutocompleteMode } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export type NeuAutocompleteMode = 'strict' | 'free-text';

NeuAutocompleteOptionTypeScript

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

// Declaración pública (solo referencia)
export interface NeuAutocompleteOption<V = unknown> {
  readonly disabled?: boolean;
  readonly label: string;
  readonly value: V;
}

NeuAutocompleteOverlayEventTypeScript

import type { NeuAutocompleteOverlayEvent } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export interface NeuAutocompleteOverlayEvent {
  readonly originalEvent: Event | null;
  readonly reason: 'completion' | 'focus' | 'dropdown' | 'keyboard' | 'selection' | 'clear' | 'escape' | 'outside' | 'tab' | 'programmatic';
}

NeuAutocompleteSelectEventTypeScript

import type { NeuAutocompleteSelectEvent } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export interface NeuAutocompleteSelectEvent<T, V> {
  readonly option: T;
  readonly originalEvent: Event | null;
  readonly value: V;
}

NeuAutocompleteSizeTypeScript

import type { NeuAutocompleteSize } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export type NeuAutocompleteSize = 'sm' | 'md' | 'lg';

NeuAutocompleteSuggestionsRequestTypeScript

import type { NeuAutocompleteCompletionSource } from '@neural-ui/core/autocomplete';
import type { NeuViewportRange } from '@neural-ui/core/option-api';

import type { NeuAutocompleteSuggestionsRequest } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export interface NeuAutocompleteSuggestionsRequest {
  readonly query: string;
  readonly queryRevision: number;
  readonly range?: NeuViewportRange;
  readonly reason: 'initial' | 'query' | 'viewport' | 'retry';
  readonly requestId: number;
  readonly source: NeuAutocompleteCompletionSource;
}

NeuAutocompleteValueTypeScript

import type { NeuAutocompleteMode } from '@neural-ui/core/autocomplete';

import type { NeuAutocompleteValue } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export type NeuAutocompleteValue<V, F extends NeuAutocompleteMode = 'strict'> = F extends 'free-text' ? V | string | null : V | null;

NeuAutocompleteVariantTypeScript

import type { NeuAutocompleteVariant } from '@neural-ui/core/autocomplete';

// Declaración pública (solo referencia)
export type NeuAutocompleteVariant = 'outline' | 'solid';

NeuIndexRangeTypeScript

import type { NeuIndexRange } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export interface NeuIndexRange {
  readonly end: number;
  readonly start: number;
}

NeuOptionAccessorTypeScript

import type { NeuOptionPath } from '@neural-ui/core/option-api';

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionAccessor<T, R = unknown> = Exclude<keyof T, string> | NeuOptionPath<T> | ((option: T) => R);

NeuOptionActivatedEventTypeScript

import type { NeuOptionActivatedEvent } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export interface NeuOptionActivatedEvent<T, V> {
  readonly option: T;
  readonly originalEvent?: Event;
  readonly source: 'pointer' | 'keyboard';
  readonly value: V;
}

NeuOptionDisabledAccessorTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionDisabledAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionDisabledAccessor<T> = NeuOptionAccessor<T, boolean>;

NeuOptionFilterConfigTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';
import type { NeuOptionFilterMatchMode } from '@neural-ui/core/option-api';
import type { NeuOptionFilterStrategy } from '@neural-ui/core/option-api';

import type { NeuOptionFilterConfig } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export interface NeuOptionFilterConfig<T> {
  readonly fields?: readonly NeuOptionAccessor<T, unknown>[];
  readonly locale?: string;
  readonly matchMode?: NeuOptionFilterMatchMode;
  readonly strategy?: NeuOptionFilterStrategy;
}

NeuOptionFilterMatchModeTypeScript

import type { NeuOptionFilterMatchMode } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionFilterMatchMode = 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals';

NeuOptionFilterStrategyTypeScript

import type { NeuOptionFilterStrategy } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionFilterStrategy = 'client' | 'server';

NeuOptionGroupConfigTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionGroupConfig } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export interface NeuOptionGroupConfig<T, G> {
  readonly childrenAccessor: NeuOptionAccessor<G, readonly T[]>;
  readonly disabledAccessor?: NeuOptionAccessor<G, boolean> | null;
  readonly labelAccessor: NeuOptionAccessor<G, unknown>;
}

NeuOptionGroupTemplateContextTypeScript

import type { NeuOptionGroupTemplateContext } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export interface NeuOptionGroupTemplateContext<G> {
  readonly $implicit: G;
  readonly disabled: boolean;
  readonly group: G;
  readonly index: number;
  readonly label: string;
}

NeuOptionLabelAccessorTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionLabelAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionLabelAccessor<T> = NeuOptionAccessor<T, string>;

NeuOptionLoaderTemplateContextTypeScript

import type { NeuOptionLoaderTemplateContext } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export interface NeuOptionLoaderTemplateContext {
  readonly $implicit: number;
  readonly count: number;
  readonly end: number;
  readonly first: number;
  readonly logicalIndex: number;
}

NeuOptionPathTypeScript

import type { NeuOptionPath } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionPath<T> = Extract<keyof T, string> | `${Extract<keyof T, string>}.${string}`;

NeuOptionTemplateContextTypeScript

import type { NeuOptionTemplateContext } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export interface NeuOptionTemplateContext<T> {
  readonly $implicit: T;
  readonly active: boolean;
  readonly disabled: boolean;
  readonly index: number;
  readonly logicalIndex: number;
  readonly option: T;
  readonly selected: boolean;
}

NeuOptionValueAccessorTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionValueAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionValueAccessor<T, V> = NeuOptionAccessor<T, V>;

NeuViewportRangeTypeScript

import type { NeuIndexRange } from '@neural-ui/core/option-api';

import type { NeuViewportRange } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export interface NeuViewportRange {
  readonly render: NeuIndexRange;
  readonly visible: NeuIndexRange;
}

Estilos y tokens

Carga los estilos de Core una sola vez. Utiliza los tokens públicos para personalizaciones locales o un preset para cambios de toda la aplicación. Conserva la legibilidad de etiquetas, foco, opciones seleccionadas y estados deshabilitados en modo claro y oscuro.

Tokens específicos

Token	Efecto	Estado / variante	Valor / origen	Alternativa
`--neu-autocomplete-option-height`	Valor del tema heredado que utiliza este componente	Superficie del campo	`40px`Declaración raíz	`Sin alias de token`

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-border-hover`	Bordes de controles al pasar el puntero	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.16)`
`--neu-error`	Color del campo no válido o de la acción de peligro	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#dc2626`
`--neu-focus-ring`	Anillo normal del foco de teclado	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-primary-50`	Superficie tenue de marca para estados de puntero y foco	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#eff6ff`
`--neu-primary-dark`	Tono oscuro de marca; texto de Button outline y ghost en el tema claro	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#005fcc`
`--neu-radius`	Radio de las esquinas del control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`8px`

Componentes relacionados

Elige el control según la interacción: una lista visible, un campo de búsqueda, una jerarquía o un conjunto de opciones exclusivas.

Inputs

Models

Outputs

Templates

Template ClearIcon

Template DropdownIcon

Template Empty

Template Footer

Template Group

Template Header

Template Item

Template Loader

Template LoadingIcon

Métodos públicos

Public Types

Tokens específicos

Tokens compartidos utilizados