@styloviz/tag-input

Tag / chip input for entering multiple tokens with keyboard and paste support.

Part of the StyloViz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/tag-input

Requires @angular/core and @angular/common >= 21. Self-contained — no other StyloViz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvTagInputComponent } from '@styloviz/tag-input';

@Component({
  standalone: true,
  imports: [SvTagInputComponent],
  template: `
    <sv-tag-input />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | values | string[] (two-way) | [] | Current tags (two-way). | | options | TagOption[] | [] | Suggestion options offered as the user types. | | size | TagInputSize | 'md' | Field size: sm, md or lg. | | label | string | '' | Field label. | | placeholder | string | 'Add tags…' | Placeholder shown in the input. | | hint | string | '' | Helper text shown below the field. | | errorMessage | string | '' | Error message; sets the field to an error state when present. | | disabled | boolean | false | Disable the field. | | required | boolean | false | Mark the field as required. |

Outputs

| Output | Type | Description | | --- | --- | --- | | tagsChange | TagInputChangeEvent | Emitted with the change (added/removed tag + full list). |

Documentation

Full API reference and live demos: https://styloviz.dev/docs

License

MIT