kit

Tag input

Several short values in one field, such as labels or email addresses, as removable chips, starting life as a plain comma-separated text field.

Tier 2 · behaviour Text input with a list of chips beta

Example

Press Enter or comma after each one.

Show the markup 
<div class="demo-form">
  <div class="kit-field demo-span"><label for="tg-a">Tags</label><kit-tags><input class="kit-input" id="tg-a" name="tags" value="Option one, Option two" aria-describedby="tg-a-hint" list="tg-suggest"></kit-tags><p class="kit-field-hint" id="tg-a-hint">Press Enter or comma after each one.</p>
  <datalist id="tg-suggest"><option value="Option three"></option><option value="Option four"></option><option value="Another option"></option></datalist></div>
  <div class="kit-field"><label for="tg-b">Up to three</label><kit-tags max="3"><input class="kit-input" id="tg-b" name="three" value="One"></kit-tags></div>
</div>

Usage

<div class="kit-field">
  <label for="topics">Topics</label>
  <kit-tags>
    <input class="kit-input" id="topics" name="topics" value="Design, Research" aria-describedby="topics-hint">
  </kit-tags>
  <p class="kit-field-hint" id="topics-hint">Press Enter or comma after each one.</p>
</div>

Without the script it's a text field of comma-separated values, which your server splits. With it, each value is a chip with a remove button, and a text box after them takes new ones. The original input stays, hidden, holding the joined value, so the form submits the same string.

Attribute Values Default
max the most tags allowed no limit
separator what joins them in the value ,
list on the input a <datalist> id, for suggestions none

Enter, comma or Tab (with text typed) adds a tag; Backspace in the empty box removes the last; pasting "a, b, c" adds three. Duplicates are ignored. change fires on the element with { tags }.

Accessibility

  • The chips are a list, named by the field's label, so screen readers say how many there are. Each remove button says which tag it removes.
  • Adding and removing are announced ("Research added", "Design removed").
  • The text box takes the field's id, so the label and hint still belong to it.