TagInput

Use <ot-taginput>. Type a word and press Enter or , (comma) to add.

<ot-taginput value="apple, mango">
  <input placeholder="Add tags ..." maxlength="15" />
</ot-taginput>

Autocomplete

Give the <input> a list and a <datalist>, then populate the datalist from the input's native oninput handler. Selecting a suggestion creates a tag.

<ot-taginput id="taginput-demo">
  <input list="fruit-list" placeholder="Type a fruit name" oninput="tagInputAutoComplete(this)">
  <datalist id="fruit-list"></datalist>
</ot-taginput>

<script>
function tagInputAutoComplete(el) {
  const fruits = ['Apple', 'Apricot', 'Banana', 'Cherry', 'Mango', 'Melon'];
  el.list.replaceChildren(...fruits
    .filter(f => f.toLowerCase().startsWith(el.value.toLowerCase()))
    .map(v => new Option(v)));
}
</script>

Programmatic read and write

Mutate the value property of the component. A standard input event is dispatched (and bubbles) whenever a tag is added or removed.

<ot-taginput id="tags"><input /></ot-taginput>

<script>
  const el = document.getElementById('tags');
  el.value = ['apple', 'mango'];     // replace all
  el.value = [...el.value, 'kiwi'];  // append
  el.value = [];                     // clear

  console.log(el.value);             // read

  el.addEventListener('input', e => {
    console.log(e.detail); // ['apple', 'mango'] <-- current tags
  });
</script>

Options