Tags Input

Type to add tags, backspace/click to remove. Tags are dynamic, so (like pagination) you provide a <template> and stimulus-zag stamps one out per value.

Labels

<div
  data-controller="zag-tags-input"
  data-part="root"
  data-zag-tags-input-name-value="labels"
  data-zag-tags-input-value-value='["bug","ui"]'
  class="max-w-sm space-y-1"
>
  <label data-part="label" class="text-sm font-medium">Labels</label>
  <div
    data-part="control"
    class="border-input bg-popover focus-within:ring-ring/50 flex flex-wrap items-center gap-1.5 rounded-lg border p-2 focus-within:ring-2"
  >
    <template data-zag-tags-input-target="itemTemplate">
      <span
        data-part="item"
        class="bg-primary/10 text-primary inline-flex items-center gap-1 rounded px-2 py-0.5 text-sm"
      >
        <div data-part="item-preview" class="inline-flex items-center gap-1">
          <span data-part="item-text"></span>
          <button
            data-part="item-delete-trigger"
            class="text-primary hover:text-primary"
            aria-label="Remove"
          >
            ×
          </button>
        </div>
        <input data-part="item-input" class="w-20 bg-transparent focus:outline-none" />
      </span>
    </template>
    <input
      data-part="input"
      placeholder="Add tag…"
      class="flex-1 bg-transparent text-sm focus:outline-none"
    />
  </div>
  <input data-part="hidden-input" class="sr-only" />
</div>

Parts

root, label, control, input, clear-trigger, hidden-input, item, item-preview, item-text, item-delete-trigger, item-input.

Target: itemTemplate (the tag markup to clone per value).

Values

Attribute	Type	Default	Description
data-zag-tags-input-value-value	Array	[]	Initial tags (JSON).
data-zag-tags-input-name-value	String	""	name for form submission.
data-zag-tags-input-max-value	Number	0	Max tags (0 = unlimited).
data-zag-tags-input-allow-duplicates-value	Boolean	false	Allow duplicate tags.
data-zag-tags-input-add-on-paste-value	Boolean	false	Add tags from pasted, delimited text.
data-zag-tags-input-editable-value	Boolean	true	Allow editing a tag (double-click).
data-zag-tags-input-disabled-value	Boolean	false	Disable the input.
data-zag-tags-input-read-only-value	Boolean	false	Read-only.
data-zag-tags-input-required-value	Boolean	false	Mark required.

Events

Emits zag-tags-input:change — detail is { value: string[] }.

Programmatic control

value (getter), setValue(string[]), add(value), clear().