Chip | Neural Native

Import

component.ts

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

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Selectable filters

Filter real team rows with independent chips. Clearing both filters restores every person, while the unavailable archived filter stays visibly disabled.

View and copy the complete example

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">Find your people</text><text class="product-caption">Small filters, a focused result</text></view>
    <view class="product-actions"><neu-chip label="Design" [(selected)]="design" /><neu-chip label="Engineering" tone="info" [(selected)]="engineering" /><neu-chip label="Archived" tone="neutral" [disabled]="true" /></view>
    <text class="product-caption">{{ visiblePeople().length }} {{ visiblePeople().length === 1 ? 'team member shown' : 'team members shown' }}</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">Clear both filters to show the whole team.</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: 'Design', team: 'design' }, { name: 'Grace Hopper', role: 'Engineering', team: 'engineering' }, { name: 'Alan Turing', role: 'Engineering', team: 'engineering' }];
  readonly visiblePeople = computed(() => this.people.filter(person => (!this.design() && !this.engineering()) || (this.design() && person.team === 'design') || (this.engineering() && person.team === 'engineering')));
}

Removable tag

Remove Angular and restore it to repeat the interaction.

View and copy the complete example

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="Remove" (removed)="included.set(false)" />
    }</view>
    @if (!included()) { <neu-button label="Restore 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);
}

Semantic colors

Compare the six semantic colors supplied by the theme.

View and copy the complete example

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 label="brand" tone="brand" [selected]="true" [selectable]="false" />
    <neu-chip label="neutral" tone="neutral" [selected]="true" [selectable]="false" />
    <neu-chip label="success" tone="success" [selected]="true" [selectable]="false" />
    <neu-chip label="info" tone="info" [selected]="true" [selectable]="false" />
    <neu-chip label="warning" tone="warning" [selected]="true" [selectable]="false" />
    <neu-chip 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 {

}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Chip · android · native capture — **Android**Native screenshot

Chip · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	Required	Input	Human-readable name for the control, action or group.
tone	NeuTone	'brand'	Input	Semantic color: neutral, brand, success, info, warning or danger. The accent value remains a compatible alias for brand. Colors use NeuTheme tokens; explain statuses with words as well as color.
selectable	boolean	true	Input	Enables selection in addition to the component’s presentation behavior.
removable	boolean	false	Input	Shows the separate remove action. Pressing it emits removed; your application removes the chip from its data or view. It does not toggle selected. The configurator hides the preview after removal; Reset restores it.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.
removeLabel	string	'Remove'	Input	Text or accessible name used for remove. It does not perform the action by itself.

Models

Name	Type	Default	Binding	Description
selected	boolean	false	Model · two-way	Whether this chip is selected. The selectable property controls user toggling; removal is independent of selection. Bind a writable signal with [(selected)].

Outputs

Name	Payload	When it emits
selectedChange	boolean	Emits the updated selected value. [(selected)] binds this output together with its model input.
removed	void	Requests removal after pressing the enabled remove action. No payload. Remove the item in your application; the component does not mutate its parent collection.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

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

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

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

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