Chip

Select or remove compact labels with explicit application-owned state.

Category: Feedback and status
Import: @neural-ui/core/chip
Selector: neu-chip

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

Usage

A selectable Chip is a toggle button: clicking, Enter or Space emits selectedChange. Bind selected and accept the proposed value in the application. With removable, the Chip becomes a group containing a remove button; selectedChange is not emitted. removed requests removal, but the application must actually remove the item. Project the visible label or an icon and label together.

Examples

Try the interaction and open Code for the implementation. Reset restores the initial state.

Controlled selection

Angular

Not selected

Application-owned removal

Angular

TypeScript

CSS

3 filters

Unavailable

Try and configure

Change the options and inspect the preview and generated template. Code contains the full executable source.

Live preview

Angular

Change the state by clicking the chip.

Selected

Removable

Disabled

Remove label

Projected content

Generated template: reflects the options above. Open Code for the complete imports and state.

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

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

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

export const selected = signal(false);

Data and content

selected is an Input, not a model. selectedChange is a proposed value: use [selected] and (selectedChange) to update application state. removed is an event; the component does not remove itself. There are no Signal Forms bindings.

Accessibility and keyboard

Selectable chips expose aria-pressed. Tab focuses enabled chips; Enter and Space propose a toggle without scrolling the page. Removable chips focus their native remove button, named by removeAriaLabel. disabled blocks both interactions. Keep visible text meaningful; do not rely on selected color alone.

Key	Action
`Tab`	Reach enabled selectable chips and available remove buttons.
`Enter`	Propose toggling the focused selectable chip, or remove it from its focused remove button.
`Space`	Propose toggling the focused selectable chip, or remove it from its focused remove button.

API

Inputs and Outputs are extracted from the pinned package. Named types link to their definitions; Templates list only supported projection areas.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`disabled`	`boolean`	`false`	`[disabled]`	Block selection and removal.
`removable`	`boolean`	`false`	`[removable]`	Replace toggle semantics with a group and native remove button.
`removeAriaLabel`	`string`	`'Remove'`	`[removeAriaLabel]`	Accessible name for the remove button.
`selected`	`boolean`	`false`	`[selected]`	Controlled selected state; update it after accepting selectedChange.
`size`	`NeuChipSize`	`'md'`	`[size]`	sm or md compact size.
`tone`	`NeuChipTone`	`'neutral'`	`[tone]`	Semantic label intent.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`removed`	`void`	`(removed)="onRemoved($event)"`	Removal request; the application removes the item.
`selectedChange`	`boolean`	`(selectedChange)="onSelectedChange($event)"`	Proposes the next selected boolean; never mutates selected automatically.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`*` Chip label View example	Content projection Project a meaningful label and optional decorative icon.	`<ng-content />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Icon and label

*

Reviewed

Not selected

Public Types

Open a type to inspect its definition and interface fields.

NeuChipSizeTypeScript

NeuChipToneTypeScript

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

// Public declaration (reference only)
export type NeuChipTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';

Styles and tokens

Use the public component Inputs and Core surface, text, spacing and semantic color tokens. Keep content responsive and verify both themes.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-border-hover`	Control borders on hover	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.16)`
`--neu-error-bg`	Background of invalid or danger states	Shared by other Core consumers; scope the override.	`#fee2e2`
`--neu-error-text`	Error text and danger outline/ghost Button text in both themes	Shared by other Core consumers; scope the override.	`#991b1b`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-primary-50`	Subtle brand surface for hover and focus states	Shared by other Core consumers; scope the override.	`#eff6ff`
`--neu-primary-dark`	Dark brand shade; outline and ghost Button text in the light theme	Shared by other Core consumers; scope the override.	`#005fcc`
`--neu-primary-fg`	Foreground drawn over the primary background	Shared by other Core consumers; scope the override.	`#ffffff`