Chip | Neural Native

Importación

component.ts

import { NeuChipComponent } from '@neural-ui/native/chip';

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Filtros seleccionables

Filtra filas reales con chips independientes. Al desmarcar ambos se recupera todo el equipo y el filtro de archivados permanece desactivado.

Ver y copiar el ejemplo completo

selectable-filters.component.ts

import { Component, signal, computed } from '@angular/core';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { NeuChipComponent } from '@neural-ui/native/chip';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuAvatarComponent, NeuChipComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Encuentra a tu equipo</text><text class="product-caption">Filtros pequeños, resultados claros</text></view>
    <view class="product-actions"><neu-chip removeLabel="Eliminar etiqueta" label="Diseño" [(selected)]="design" /><neu-chip removeLabel="Eliminar etiqueta" label="Ingeniería" tone="info" [(selected)]="engineering" /><neu-chip removeLabel="Eliminar etiqueta" label="Archivado" tone="neutral" [disabled]="true" /></view>
    <text class="product-caption">{{ visiblePeople().length }} {{ visiblePeople().length === 1 ? 'miembro del equipo visible' : 'miembros del equipo visibles' }}</text>
    @for (person of visiblePeople(); track person.name) { <view class="product-surface"><view class="product-row"><neu-avatar [label]="person.name" size="md" /><view class="product-copy"><text class="product-heading">{{ person.name }}</text><text class="product-caption">{{ person.role }}</text></view></view></view> }
    <text class="product-caption">Desmarca ambos filtros para mostrar todo el equipo.</text></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly design = signal(true);
  readonly engineering = signal(false);
  readonly people = [{ name: 'Ada Lovelace', role: 'Diseño', team: 'design' }, { name: 'Grace Hopper', role: 'Ingeniería', team: 'engineering' }, { name: 'Alan Turing', role: 'Ingeniería', team: 'engineering' }];
  readonly visiblePeople = computed(() => this.people.filter(person => (!this.design() && !this.engineering()) || (this.design() && person.team === 'design') || (this.engineering() && person.team === 'engineering')));
}

Etiqueta eliminable

Elimina Angular y recupéralo para repetir la interacción.

Ver y copiar el ejemplo completo

removable-tag.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuChipComponent } from '@neural-ui/native/chip';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuChipComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <view class="usage-row">@if (included()) {
      <neu-chip label="Angular" tone="brand" [selectable]="false" [removable]="true" removeLabel="Eliminar" (removed)="included.set(false)" />
    }</view>
    @if (!included()) { <neu-button label="Restaurar Angular" variant="text" size="sm" (pressed)="included.set(true)" /> }
    </view>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly included = signal(true);
}

Colores semánticos

Compara los seis colores semánticos que proporciona el tema.

Ver y copiar el ejemplo completo

semantic-colors.component.ts

import { Component } from '@angular/core';
import { NeuChipComponent } from '@neural-ui/native/chip';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuChipComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <view class="usage-row"><neu-chip removeLabel="Eliminar etiqueta" label="brand" tone="brand" [selected]="true" [selectable]="false" />
    <neu-chip removeLabel="Eliminar etiqueta" label="neutral" tone="neutral" [selected]="true" [selectable]="false" />
    <neu-chip removeLabel="Eliminar etiqueta" label="success" tone="success" [selected]="true" [selectable]="false" />
    <neu-chip removeLabel="Eliminar etiqueta" label="info" tone="info" [selected]="true" [selectable]="false" />
    <neu-chip removeLabel="Eliminar etiqueta" label="warning" tone="warning" [selected]="true" [selectable]="false" />
    <neu-chip removeLabel="Eliminar etiqueta" label="danger" tone="danger" [selected]="true" [selectable]="false" /></view>
    </view>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {

}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Chip · android · native capture — **Android**Captura nativa

Chip · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
tone	NeuTone	'brand'	Input	Color semántico: neutral, brand, success, info, warning o danger. El valor accent se conserva como alias compatible de brand. Utiliza los tokens de NeuTheme; explica los estados con palabras además del color.
selectable	boolean	true	Input	Habilita la selección además de la presentación del componente.
removable	boolean	false	Input	Muestra una acción independiente para quitar el chip. Al pulsarla emite removed; tu aplicación lo retira de sus datos o de la vista. No cambia selected. El configurador oculta el chip al quitarlo; Reset lo recupera.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
removeLabel	string	'Remove'	Input	Texto o nombre accesible utilizado para eliminar. No ejecuta la acción por sí solo.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
selected	boolean	false	Model · bidireccional	Indica si este chip está seleccionado. La propiedad selectable controla la selección del usuario; quitarlo es una acción independiente. Enlaza una signal escribible mediante [(selected)].

Outputs

Nombre	Payload	Cuándo se emite
selectedChange	boolean	Emite el valor actualizado de selected. [(selected)] enlaza este output junto con su input model.
removed	void	Solicita quitar el chip al pulsar su acción de eliminación habilitada. Sin payload. Retira el elemento en tu aplicación; el componente no modifica la colección del padre.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

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

// Fields inside your component class
readonly selected = signal<boolean>(false);

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

NeuTone

NeuTone.ts

import type { NeuTone } from '@neural-ui/native/foundation';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuTone = 'neutral' | 'brand' | 'accent' | 'success' | 'info' | 'warning' | 'danger';