InputTags | Neural UI v2

Uso

El modelo es un array readonly de valores. Intro o un separador añaden un elemento; escribir un borrador no modifica el array. options y typeahead añaden sugerencias. Con objetos, utiliza optionLabel/optionValue, compareWith para la identidad y textValue para convertir texto libre en valores de dominio.

Ejemplos

Interactúa con el ejemplo y abre Código para ver su implementación completa.

Temas

Angular

Elige una sugerencia o pulsa Intro para añadir texto. Pega temas separados por comas para añadir varios; los duplicados se excluyen por defecto.

Etiquetas y resultado del pegado

Prueba y configura

Cambia las opciones y prueba la vista previa. Despliega el valor de la aplicación o el evento para consultar los datos reales; el template generado permanece junto al configurador.

Vista previa

Temas

Angular

Valor actual de la aplicación

Template generado: refleja las opciones anteriores. La pestaña Código incluye los imports y el estado.

<neu-input-tags
  [(value)]="tags"
  [options]="topics"
  [typeahead]="true"
  [allowDuplicates]="false"
  [commitOnBlur]="false"
  size="md"
  [delay]="0"
  [emptyMessage]="'No hay temas coincidentes'"
  [fluid]="true"
  [label]="'Temas'"
  [placeholder]="'Añade un tema'"
  [removeLabel]="'Eliminar'"
/>

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 tags = signal([
  "Angular"
]);

export const topics = [
  "Angular",
  "Signals",
  "TypeScript",
  "CSS"
];

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 · NeuOptionCompareWith<V>

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).

groups · readonly NeuInputTagsGroup<T>[]

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

normalizeToken · (text: string) => string

En Código: define normalizeToken con este tipo y utiliza [normalizeToken]="normalizeToken" (o normalizeToken() 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).

separators · readonly string[]

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

textValue · ((text: string) => V | null | undefined) | null

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

Signal Forms

Enlaza FormField una sola vez al componente; el campo controla el valor y la validación. El esquema exige un valor no vacío. Sal del control para marcarlo como visitado y restablece el campo para limpiar el valor y el estado de interacción.

Guía de Signal Forms

Temas

Válido: true

Valor del formulario

Valor y eventos

Utiliza [(value)] o [value] junto con (valueChange), no ambas formas. El modelo sincroniza el estado de la aplicación; los demás Outputs comunican los eventos documentados. touch comunica que se ha visitado o abandonado el control, no un valor nuevo.

Accesibilidad y teclado

La etiqueta visible nombra el campo de texto. Define removeLabel para los botones de eliminación; un template de elemento debe conservar una acción de eliminación accesible. Las flechas recorren sugerencias, Intro añade un elemento y Escape cierra el panel. readonly permite consultar los valores sin añadir ni eliminar etiquetas.

Tecla	Acción
`Tab`	Entra y sale del control.
`Enter`	Añade el texto o la sugerencia activa.
`Backspace / Delete`	Edita el texto o elimina la etiqueta enfocada.
`Escape`	Cierra el panel de sugerencias.

API

Los Inputs, modelos y Outputs proceden del contrato de Core fijado. Pulsa un tipo con nombre para abrir su definición. Cada Template incluye su ejemplo y 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
`allowDuplicates`	`boolean`	`false`	`[allowDuplicates]`	Permite valores repetidos; en otro caso compareWith excluye los duplicados.
`ariaDescribedBy`	`string`	`''`	`[ariaDescribedBy]`	IDs de los elementos que describen el control, separados por espacios.
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Nombre accesible cuando no hay una etiqueta visible.
`ariaLabelledBy`	`string`	`''`	`[ariaLabelledBy]`	ID del elemento que proporciona el nombre accesible.
`ariaRequired`	`boolean`	`false`	`[ariaRequired]`	Estado accesible de obligatoriedad; no instala un validador.
`autocomplete`	`string`	`'off'`	`[autocomplete]`	Atributo autocomplete del navegador para el input.
`autofocus`	`boolean`	`false`	`[autofocus]`	Solicita el foco cuando se inicializa el control.
`autoOptionFocus`	`boolean`	`false`	`[autoOptionFocus]`	Activa una opción disponible al abrir la lista.
`commitOnBlur`	`boolean`	`false`	`[commitOnBlur]`	Añade el borrador al salir del control compuesto.
`compareWith`	`NeuOptionCompareWith<V>`	`Object.is`Valor derivado	`[compareWith]`	Función para comparar valores seleccionados; utiliza una identidad de dominio estable.
`completeOnFocus`	`boolean`	`false`	`[completeOnFocus]`	Solicita sugerencias al entrar el foco en el control.
`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]`	Impide la interacción del usuario.
`emptyMessage`	`string`	`'No suggestions'`	`[emptyMessage]`	Mensaje que se muestra cuando la colección de opciones está vacía.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Errores de validación proporcionados por el formulario o la aplicación.
`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.
`groups`	`readonly NeuInputTagsGroup<T>[]`	`[]`	`[groups]`	Opciones agrupadas, con sus elementos hijos definidos mediante groupConfig.
`hidden`	`boolean`	`false`	`[hidden]`	Oculta el control según el estado del formulario.
`hint`	`string`	`''`	`[hint]`	Texto de ayuda asociado al campo.
`inputId`	`string`	`''`	`[inputId]`	Identificador estable del control nativo; se genera si se omite.
`invalid`	`boolean`	`false`	`[invalid]`	Muestra el estado inválido; no añade una regla de validación.
`label`	`string`	`''`	`[label]`	Etiqueta visible y nombre accesible del control.
`loading`	`boolean`	`false`	`[loading]`	Muestra el estado de carga mientras la aplicación proporciona datos.
`maxItems`	`number \| null`	`null`	`[maxItems]`	Número máximo de etiquetas confirmadas, o null sin límite.
`maxlength`	`number \| null`	`null`	`[maxlength]`	Longitud máxima del borrador nativo, o null sin límite.
`minlength`	`number \| null`	`null`	`[minlength]`	Longitud mínima del borrador nativo, o null si no se especifica.
`minQueryLength`	`number`	`1`	`[minQueryLength]`	Longitud mínima del borrador antes de solicitar sugerencias.
`name`	`string`	`''`	`[name]`	Nombre asociado al control nativo del formulario.
`normalizeToken`	`(text: string) => string`	`(text) => text.trim()`Valor derivado	`[normalizeToken]`	Normaliza el texto antes de convertirlo y comparar duplicados. Por defecto elimina espacios extremos.
`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.
`pending`	`boolean`	`false`	`[pending]`	Estado del formulario que indica que hay una validación asíncrona pendiente.
`placeholder`	`string`	`'Add tag...'`	`[placeholder]`	Texto que se muestra cuando el campo no tiene un valor seleccionado.
`readonly`	`boolean`	`false`	`[readonly]`	Mantiene el control enfocable y legible sin aceptar cambios.
`removeLabel`	`string`	`'Remove'`	`[removeLabel]`	Prefijo accesible para eliminar una etiqueta.
`required`	`boolean`	`false`	`[required]`	Marca el campo como obligatorio; utiliza un validador del formulario para exigirlo.
`scrollHeight`	`string`	`'200px'`	`[scrollHeight]`	Altura máxima del área visible de opciones.
`separators`	`readonly string[]`	`[',']`	`[separators]`	Caracteres que añaden un borrador o separan texto pegado. Por defecto la coma.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	`[size]`	Tamaño visual del campo: sm, md o lg.
`tabindex`	`number \| null`	`null`	`[tabindex]`	Orden de tabulación del punto de entrada por teclado.
`textValue`	`((text: string) => V \| null \| undefined) \| null`	`null`	`[textValue]`	Convierte texto libre en un valor. Devolver null/undefined rechaza el elemento.
`title`	`string`	`''`	`[title]`	Texto del tooltip nativo del campo.
`touched`	`boolean`	`false`	`[touched]`	Estado del formulario que indica que el control ha sido visitado.
`typeahead`	`boolean`	`false`	`[typeahead]`	Activa el panel de sugerencias a partir de options o groups.
`variant`	`"outline" \| "solid"`	`'outline'`	`[variant]`	Variante visual del campo: outline o solid.

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`	`readonly V[]`	`[]`	`[(value)]`	Array readonly de valores confirmados; el borrador es independiente.

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`	`NeuInputTagsClearedEvent<V>`	`(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.
`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.
`itemRemoved`	`NeuInputTagsRemovedEvent<V>`	`(itemRemoved)="onItemRemoved($event)"`	Comunica el elemento y el índice eliminados; valueChange ya sincroniza el array.
`itemReordered`	`NeuInputTagsReorderedEvent<V>`	`(itemReordered)="onItemReordered($event)"`	Comunica una reordenación; valueChange sincroniza el nuevo orden del array.
`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.
`pasteResult`	`NeuInputTagsPasteResult<V>`	`(pasteResult)="onPasteResult($event)"`	Comunica los elementos aceptados y rechazados después de procesar el pegado.
`suggestionsRequest`	`NeuOptionDataRequest`	`(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
`NeuInputTagsFooterDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuInputTagsFooter]`
`NeuInputTagsGroupDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuInputTagsGroup]`
`NeuInputTagsHeaderDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuInputTagsHeader]`
`NeuInputTagsItemDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuInputTagsItem]`
`NeuInputTagsOptionDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuInputTagsOption]`
`NeuInputTagsRemoveIconDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuInputTagsRemoveIcon]`

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

Template Group

NeuInputTagsGroupDirective

Temas

Angular

Template Header

NeuInputTagsHeaderDirective

Temas

Angular

Template Item

NeuInputTagsItemDirective

Temas

Angular

Template Option

NeuInputTagsOptionDirective

Temas

Angular

Template RemoveIcon

NeuInputTagsRemoveIconDirective

Temas

Angular

Public Types

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

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

NeuInputTagsClearedEventTypeScript

import type { NeuInputTagsClearedEvent } from '@neural-ui/core/input-tags';

// Declaración pública (solo referencia)
export interface NeuInputTagsClearedEvent<V> {
  readonly originalEvent: Event;
  readonly previousValue: readonly V[];
}

NeuInputTagsGroupTypeScript

import type { NeuInputTagsGroup } from '@neural-ui/core/input-tags';

// Declaración pública (solo referencia)
export interface NeuInputTagsGroup<T> {
  readonly disabled?: boolean;
  readonly label: string;
  readonly options: readonly T[];
}

NeuInputTagsGroupTemplateContextTypeScript

import type { NeuInputTagsGroup } from '@neural-ui/core/input-tags';

import type { NeuInputTagsGroupTemplateContext } from '@neural-ui/core/input-tags';

// Declaración pública (solo referencia)
export interface NeuInputTagsGroupTemplateContext<T> {
  readonly $implicit: NeuInputTagsGroup<T>;
  readonly group: NeuInputTagsGroup<T>;
}

NeuInputTagsItemTemplateContextTypeScript

import type { NeuInputTagsItemTemplateContext } from '@neural-ui/core/input-tags';

// Declaración pública (solo referencia)
export interface NeuInputTagsItemTemplateContext<T, V> {
  readonly $implicit: V;
  readonly index: number;
  readonly onRemove: (event: Event, index: number) => void;
  readonly option: T | null;
  readonly value: V;
}

NeuInputTagsOptionTemplateContextTypeScript

import type { NeuInputTagsOptionTemplateContext } from '@neural-ui/core/input-tags';

// Declaración pública (solo referencia)
export interface NeuInputTagsOptionTemplateContext<T, V> {
  readonly $implicit: T;
  readonly index: number;
  readonly option: T;
  readonly value: V;
}

NeuInputTagsPasteResultTypeScript

import type { NeuInputTagsPasteResult } from '@neural-ui/core/input-tags';

// Declaración pública (solo referencia)
export interface NeuInputTagsPasteResult<V> {
  readonly accepted: readonly V[];
  readonly originalEvent: ClipboardEvent;
  readonly rejected: readonly string[];
}

NeuInputTagsRemovedEventTypeScript

import type { NeuInputTagsRemovedEvent } from '@neural-ui/core/input-tags';

// Declaración pública (solo referencia)
export interface NeuInputTagsRemovedEvent<V> {
  readonly index: number;
  readonly originalEvent: Event;
  readonly value: V;
}

NeuInputTagsReorderedEventTypeScript

import type { NeuInputTagsReorderedEvent } from '@neural-ui/core/input-tags';

// Declaración pública (solo referencia)
export interface NeuInputTagsReorderedEvent<V> {
  readonly from: number;
  readonly originalEvent: Event;
  readonly to: number;
  readonly value: V;
}

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

NeuOptionCompareWithTypeScript

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

// Declaración pública (solo referencia)
export type NeuOptionCompareWith<V> = (left: V, right: V) => boolean;

NeuOptionDataRequestTypeScript

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

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

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

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

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

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

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

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

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-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-radius`	Radio de las esquinas del control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`8px`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-surface-2`	Superficies secundarias y filas alternas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#f1f5f9`

Componentes relacionados

Utiliza los controles relacionados para otro tipo de valor o interacción.

Vista previa

Inputs

Models

Outputs

Templates

Template Footer

Template Group

Template Header

Template Item

Template Option

Template RemoveIcon

Public Types

Tokens específicos

Tokens compartidos utilizados