Chips

Compact elements for tags, categories, filters, and input tokens.

Input	Type	Default	Description
`variant`	`'default' \| 'secondary' \| 'outline' \| 'success' \| 'warning' \| 'danger'`	`'default'`	Visual variant
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Chip size
`removable`	`boolean`	`false`	Show dismiss button
`selectable`	`boolean`	`false`	Enable selection
`selected`	`boolean`	`false`	Two-way bound selection state
`chipValue`	`string`	`''`	Value for group selection
`disabled`	`boolean`	`false`	Disabled state
`label`	`string`	`''`	Accessible label for remove button

Import & Usage

typescript

import { Component, signal } from '@angular/core';
import { NgOatChip, NgOatChipGroup, NgOatChipInput } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatChip, NgOatChipGroup, NgOatChipInput],
  template: `
    <ng-oat-chip variant="success" [removable]="true" (removed)="onRemove()">
      Angular
    </ng-oat-chip>

    <ng-oat-chip-group [(value)]="selected" [multiple]="true">
      <ng-oat-chip chipValue="a" [selectable]="true">Option A</ng-oat-chip>
      <ng-oat-chip chipValue="b" [selectable]="true">Option B</ng-oat-chip>
    </ng-oat-chip-group>

    <ng-oat-chip-input [(chips)]="tags" placeholder="Add tag..." />
  `,
})
export class ExampleComponent {
  selected = signal('');
  tags = signal<string[]>([]);
  onRemove() { console.log('Removed'); }
}

Variants

Default

Secondary

Outline

Success

Warning

Danger

html

<ng-oat-chip>Default</ng-oat-chip>
<ng-oat-chip variant="secondary">Secondary</ng-oat-chip>
<ng-oat-chip variant="outline">Outline</ng-oat-chip>
<ng-oat-chip variant="success">Success</ng-oat-chip>
<ng-oat-chip variant="warning">Warning</ng-oat-chip>
<ng-oat-chip variant="danger">Danger</ng-oat-chip>

Sizes

Small

Default

Large

html

<ng-oat-chip size="sm">Small</ng-oat-chip>
<ng-oat-chip>Default</ng-oat-chip>
<ng-oat-chip size="lg">Large</ng-oat-chip>

Removable

TypeScript

Angular

Oat UI

Signal Forms

CSS Layers

Tags: TypeScript, Angular, Oat UI, Signal Forms, CSS Layers

html

<ng-oat-chip [removable]="true" (removed)="removeTag(tag)">{{ tag }}</ng-oat-chip>

Selectable

Angular: false · React: false · Vue: false

html

<ng-oat-chip [selectable]="true" [(selected)]="isSelected">Filter</ng-oat-chip>

Chip Group (multi-select)

Selected: none

html

<ng-oat-chip-group [(value)]="selectedFrameworks" [multiple]="true">
  <ng-oat-chip chipValue="angular" [selectable]="true">Angular</ng-oat-chip>
  <ng-oat-chip chipValue="react" [selectable]="true">React</ng-oat-chip>
  <ng-oat-chip chipValue="vue" [selectable]="true">Vue</ng-oat-chip>
</ng-oat-chip-group>

Chip Group (single select)

Selected: none

html

<ng-oat-chip-group [(value)]="status">
  <ng-oat-chip chipValue="active" variant="outline" [selectable]="true">Active</ng-oat-chip>
  <ng-oat-chip chipValue="pending" variant="outline" [selectable]="true">Pending</ng-oat-chip>
</ng-oat-chip-group>

Chip Input

initial-tag

Tags: initial-tag

html

<ng-oat-chip-input [(chips)]="tags" placeholder="Type and press Enter..." />

Disabled

Can't Remove

html

<ng-oat-chip [disabled]="true">Disabled</ng-oat-chip>
<ng-oat-chip [disabled]="true" [removable]="true">Can't Remove</ng-oat-chip>