Tags input

Tag chips with suggestions and create-as-you-type.

angular signals

import { BuiTagsInput } from 'ng-blatui';

<bui-tags-input [(tags)]="tags" />

Max tags

Design

<bui-tags-input [tags]="['Design']" [max]="3" placeholder="Up to 3 tags…" />

Disabled

Read-only Tags

<bui-tags-input [tags]="['Read-only', 'Tags']" [disabled]="true" />

Prefilled

design frontend accessibility ssr

<bui-tags-input [(tags)]="tags" />
// tags = signal(['design', 'frontend', 'accessibility'])

Suggestions & create on the fly

Focus the field to see the existing tags, type to filter them — and type something new to get a Create row. Anything added that no suggestion matches is emitted on (created), which is where the backend creates the tag and hands it back as a suggestion.

angular

<!-- suggestions turn the field into a combobox; anything typed is still accepted -->
<bui-tags-input
  [(tags)]="tags"
  [suggestions]="suggestions()"
  (created)="createTag($event)"
/>

// A tag no suggestion matches is added as typed and reported on (created) —
// that is where the backend creates it, then serves it as a suggestion.
createTag(tag: string) {
  this.api.createTag(tag).subscribe((saved) =>
    this.suggestions.update((all) => [...all, saved.name]),
  );
}

Suggestions only

<!-- [allowCreate]="false" restricts entry to the suggestions -->
<bui-tags-input [(tags)]="tags" [suggestions]="suggestions()" [allowCreate]="false" />

API reference

Inputs

Prop	Type	Default	Description
`suggestions`	`readonly string[]`	`[]`	Existing tags offered as a filtered suggestion list; leave empty for a plain free-text field.
`allowCreate`	`boolean`	`true`	Whether a tag no suggestion matches can be added — the entry that `created` reports.
`placeholder`	`string`	`'Add tag…'`	Placeholder text shown in the entry field.
`max`	`number \| null`	`null`	Maximum number of tags allowed, or `null` for no limit.
`createLabel`	`string`	—	Prefix of the create row, before the typed text. Defaults to the `tagsInputCreate` label.
`removeLabel`	`string`	—	Prefix of a chip's remove `aria-label`. Defaults to the `tagsInputRemove` label.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`tags`	`string[]`	`[]`	Current tags. Two-way bindable with `[(tags)]`.
`disabled`	`boolean`	`false`	Whether the input is disabled. Two-way bindable with `[(disabled)]`.

Outputs

Event	Payload	Description
`created`	`string`	Emits a tag that was added without matching a suggestion — create it on the backend here.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.