Input Tag

Preview

<esa-input-tag label="Tags" placeholder="Add a tag"></esa-input-tag>

Suggestions

Pass an options array (as a property) to drive a filtered suggestion dropdown. Typed values and picked suggestions coexist — anything not in the list is added as a free-form token.

<esa-input-tag label="Species" placeholder="Search or add a species"></esa-input-tag>
<!-- el.options = [{ value, label }, ...] -->

Sizes

<esa-input-tag label="Extra small" size="xs"></esa-input-tag>
<esa-input-tag label="Small" size="sm"></esa-input-tag>
<esa-input-tag label="Medium" size="md"></esa-input-tag>
<esa-input-tag label="Large" size="lg"></esa-input-tag>

States

The required asterisk, hint text, and disabled state are attribute-driven. Disabled fields keep their chips but drop the remove buttons.

<esa-input-tag label="Required" required placeholder="At least one tag"></esa-input-tag>
<esa-input-tag label="With hint" hint="Press Enter to add each tag."></esa-input-tag>
<esa-input-tag label="Disabled" disabled></esa-input-tag>

Form participation

The element is form-associated. Submitting logs the FormData entry for tags — a comma-joined list of token values.

<form>
  <esa-input-tag label="Tags" name="tags" placeholder="Add then submit"></esa-input-tag>
  <button type="submit">Submit</button>
</form>

API

Events

Accessibility

• The text field carries role="combobox" with aria-expanded, aria-haspopup="listbox", and aria-autocomplete="list".
• The dropdown is role="listbox"; each suggestion and the "Add" row are role="option" with aria-selected.
• Keyboard: Enter adds the typed value or the highlighted suggestion, ArrowUp/ArrowDown move through suggestions, Backspace on an empty field removes the last token, Escape closes the dropdown.
• Each chip's remove button has an aria-label naming the token it removes; outside-click closes the dropdown.
• Form-associated via ElementInternals — values submit with the enclosing form.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.