Tag Input

Demo & usage

More examples

<sv-tag-input [options]="options" [(values)]="tags" size="sm" />

<sv-tag-input-pro
  variant="async-search"
  [(values)]="tags"
  [asyncOptions]="results"
  (queryChange)="search($event)" />

// form = new FormGroup({ tags: new FormControl<string[]>(['ng', 'ts']) });
<sv-tag-input formControlName="tags" [options]="options" label="Skills" />

<!-- or template-driven -->
<sv-tag-input [(ngModel)]="tags" [options]="options" />

When to use

• Capturing multiple free-form or suggested tokens (tags, recipients, keywords).
• You want creatable entries, token limits or async suggestions.
• For a single choice from a list, use Select Dropdown or Autocomplete.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

<sv-tag-input-pro>

Also in this family — SvTagInputProComponent from @styloviz-pro/tag-input.

Inputs

Outputs

Customization & theming

• Nine `variant`s (default, with-avatar, grouped, creatable, with-colors, token-limit, async-search, inline, overflow) in three `size`s.
• Provide `options` or `groups`; cap with `maxTags`; drive async suggestions with `asyncOptions` + `asyncDelay`; add `label`, `hint`, `errorMessage`, `required`.
• Two-way bind `[(values)]` (string[]) or use a reactive control (CVA); react to `tagsChange` and `queryChange`. Fixed-position dropdown escapes overflow containers.

Best practices

• Do: Offer suggestions via `options` so users reuse existing tags instead of inventing duplicates.
• Do: Support Enter to add and Backspace to remove the last token.
• Do: Bind with `formControlName` / `[(ngModel)]` for validation and dirty/touched tracking; `[(values)]` remains available for lightweight use.
• Don't: Don't allow unbounded tokens where a limit makes sense — cap them with `maxTags`.
• Do: Set `compareWith` when your ids are not byte-identical across the wire — a backend that returns `U1` where the form holds `u1` otherwise gets a control that neither de-duplicates nor resolves, and says nothing about either.
• Do: Give options a `sublabel` when two of them can share a label. Two people called Alex Chen render as two identical chips otherwise, and removing one is a coin flip; with a sublabel the component adds it — but only to the chips that actually clash.
• Do: Check `unresolvedTags()` after your options load. A selected value with no matching option is kept (dropping it would delete the user's choice because a list refreshed) and marked, so the chip shows as unknown instead of displaying a database id as though it were a name.
• Do: Read `pasteReport()` if you need to react to a partial paste. Pasting 200 addresses into a limit of 50 adds 50 and reports 150 with reasons — over the limit, already in the list, matched more than one option, or not recognised — announced in a `role="status"` line. Silently taking 50 would look like it worked.

Accessibility

• Correct ARIA combobox: `role="combobox"` sits on the `<input>` with `aria-expanded`, `aria-haspopup`, `aria-controls` and `aria-activedescendant`; the popup is a `role="listbox"` of `role="option"` rows (headers, loading and "no results" are presentational).
• All option ids are generated per instance, so multiple tag fields on one page never collide; the input is named via `label` → `placeholder`.
• Keyboard: arrows highlight, Enter adds, Backspace removes the last token; every chip exposes a labelled Remove button.
• Implements ControlValueAccessor — works with `[(ngModel)]`, `[formControl]` and `formControlName`; `formControl.disable()` disables the field.