Chip

Uso

Un Chip seleccionable es un botón de alternancia: el clic, Intro o Espacio emiten selectedChange. Enlaza selected y acepta el valor propuesto desde la aplicación. Con removable, Chip pasa a ser un grupo con un botón para eliminar; no emite selectedChange. removed solicita la eliminación, pero la aplicación debe retirar el elemento. Proyecta la etiqueta visible o un icono junto a la etiqueta.

Ejemplos

Prueba la interacción y abre Código para ver la implementación. Reiniciar restablece el estado inicial.

Prueba y configura

Cambia las opciones y consulta la vista previa y el template generado. Código contiene el ejemplo ejecutable completo.

<neu-chip
  tone="neutral"
  size="md"
  [selected]="selected()"
  (selectedChange)="selected.set($event)"
  [removable]="false"
  [disabled]="false"
  removeAriaLabel="Eliminar filtro"
  (removed)="removeChip()"
>
  Angular
</neu-chip>

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

export const selected = signal(false);

Datos y contenido

selected es un Input, no un modelo. selectedChange propone un valor: utiliza [selected] y (selectedChange) para actualizar el estado de la aplicación. removed es un evento; el componente no se elimina por sí mismo. No tiene enlaces de Signal Forms.

Accesibilidad y teclado

Los chips seleccionables exponen aria-pressed. Tab enfoca los chips habilitados; Intro y Espacio proponen alternar sin desplazar la página. Los chips eliminables enfocan su botón nativo, nombrado por removeAriaLabel. disabled bloquea ambas interacciones. Mantén texto visible significativo; no dependas solo del color seleccionado.

API

Los Inputs y Outputs se extraen del paquete fijado. Los tipos con nombre enlazan a sus definiciones; Templates enumera solo las zonas de proyección disponibles.

Inputs

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

Outputs

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

Public Types

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

import type { NeuChipSize } from '@neural-ui/core/chip';

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

import type { NeuChipTone } from '@neural-ui/core/chip';

// Declaración pública (solo referencia)
export type NeuChipTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';

Estilos y tokens

Utiliza los Inputs públicos y los tokens de superficie, texto, espaciado y color semántico de Core. Mantén el contenido adaptable y comprueba ambos temas.

Componentes relacionados

Consulta los componentes relacionados para componer la interfaz del entorno.

• Badge
• Tag