This page ships a Markdown twin for AI tools.

ComponentsTagsInput

formstexulinot agent-emittableapp

TagsInput

tags-input

A list of tags the person types, pastes or removes.

Forms with the wiring documented, not guessed. Form controls take labels, descriptions and error text through props, and their keyboard and screen-reader behavior is documented in the accessibility notes below — generated from the manifest, not hand-maintained. The repository’s behavior suite holds the underlying patterns on Chromium, WebKit and a Pixel 7.

Live examples

Topics

Topics

Loading demo…

In your theme

This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.

  • Violet

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Monochrome

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Accessible Dark Contrast

    dark mode · AAA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

Props

Public props for TagsInput
NameKindRequiredDefaultDescription
valuearrayno—The tags (bind:value)
delimiterstringno","—
maxnumberno——
disabledbooleannofalse—
readonlybooleannofalse—
requiredbooleannofalse—
namestringno——
labelstringno——
placeholderstringno——
onValueChangeeventno——
classstringno——

Keyboard

Keyboard behavior for TagsInput
KeyAction
AA labelled group; the text input is named. Remove buttons are named.

Accessibility

  • A labelled group; the text input is named. Remove buttons are named.

Evidence for tags-input

Latest committed gates for tags-input (as of 2026-10-23). Static snapshot — not live CI.

Behavior

checkedscenario tags-input

8 checks

Rows in tests/behavior/scenarios/tags-input.spec.ts, held to the WAI-ARIA APG pattern, run on Chromium and WebKit, and its touch rows on the Pixel 7.

Size (gzip)

texuli/tags-input · budget 12.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • A short list of labels or keywords

Don’t use when

Prefer another component

  • A single choice from a closed list (use select or combobox)