TagsInput

A text input that turns entries into removable tags.

Import
import { TagsInput } from '@texuli/primitives/tags-input';
Pattern
Text input with a list
Size budget
4.5 KiB gzip for @texuli/primitives/tags-input
Reference
packages/primitives/docs/prim-tags-input.md

Live demo

Loading the TagsInput demo…

Anatomy

TagsInput anatomy: each box holds the parts inside it.
  • TagsInput.Root
    • TagsInput.List
      • TagsInput.Tag
        • TagsInput.TagRemove
    • TagsInput.Input

Behavior checks

tests/behavior/scenarios/tags-input.spec.ts checks the TagsInput scenario in the browser (8 checks) on Chromium, WebKit and the Pixel 7.

  • is a labelled group with a list of tags and one Tab stop
  • adds with Enter and the comma, and refuses a duplicate with an announcement
  • navigates and removes tags by keyboard
  • splits pasted text into tags
  • removes a tag with the pointer and returns focus to the input
  • removes a tag with a tap on a touch screen
  • submits one field per tag
  • has no axe violations

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.5 KiB gzip for @texuli/primitives/tags-input (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).