Tags Input

Base UI (Angular) tags-input is a chip field bound to a string array. Enter, comma, or Tab add a tag; Backspace removes the last. Optional suggestions filter as you type. It implements ControlValueAccessor so ngModel and reactive forms work the same as other kit fields.

When to use

Labels, recipients, and filter tokens the user types freely.
Settings screens next to combobox and toggle (see the settings-form cookbook).

When not to use

A single choice from a closed list — use select or combobox.
Structured records (id + label) — keep objects in the model, not only strings.

Install with npx base-ui-cli add tags-input.

freenew

Playground

angular

tailwind

Playground

Placeholder

Disabled

HTML

<base-tags-input
  [(ngModel)]="tags"
  [suggestions]="suggested"
  placeholder="Add a tag…"
  [disabled]="false">
</base-tags-input>

With suggestions

Topics

angular

tailwind

Value: angular, tailwind

HTML

Max tags

design

HTML

Empty and disabled

An empty array is the default. Disable the field when tags cannot be edited.

angular

tailwind

Keyboard & accessibility

Role: The value is a list of chips plus a text field. Suggestions use a listbox.
Focus: Focus stays in the text field. Chips are removed with Backspace or their dismiss buttons.

Shortcuts

EnterAdd the current query as a tag
,Add the text before the comma
BackspaceRemove the last tag when the query is empty
EscClose suggestions

Site-wide VPAT-style notes live on the accessibility report.

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add tags-input

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add tags-input
// Paths are relative to aliases.components (default: src/app/components)
import { TagsInputComponent } from './tags-input/tags-input.component';

@Component({
  selector: 'app-your-component',
  imports: [
    TagsInputComponent
  ],
  template: `...`
})
export class YourComponent {}

API for tags-input — generated from JSDoc in the library source.

API reference for tags-input
API	Member	Type	Default	Description
`base-tags-input`	`class`	`string`	`''`	Additional host classes.
`base-tags-input`	`label`	`string`	`''`	Visible label above the field.
`base-tags-input`	`placeholder`	`unknown`	`'Add a tag…'`	Placeholder shown when there are no tags.
`base-tags-input`	`suggestions`	`string[]`	`[]`	Optional suggestion list filtered by the current query.
`base-tags-input`	`max`	`number`	`0`	Maximum number of tags. `0` means unlimited.
`base-tags-input`	`allowCreate`	`boolean`	`true`	Allow adding a tag that is not in `suggestions`.
`base-tags-input`	`disabled`	`boolean`	`false`	Disables the field. Also set by Angular Forms via `setDisabledState`.
`base-tags-input`	`(tagsChange)`	`string[]`	—	Emits whenever the tag list changes.