Custom delimiters

The delimiter option lets you control which keys commit a pending tag. By default , and Enter commit. You can replace them entirely or add to them.

Backslash and period delimiters

Tags are committed by typing \ (backslash) or . (period) after the text. The default delimiters , and Enter do not commit.

Add tags (\ or . commits)

View code

<label for="tags">Add tags (\ or . commits)</label>
<input id="tags" type="text" name="items" />

<script type="module">
  import { Taga11y } from '../dist/taga11y.mjs';

  new Taga11y(document.getElementById('tags'), {
    suggestions: ['Apple', 'Banana', 'Cherry'],
    delimiter: ['\\\\', '.'],
  });
</script>

Tab delimiter

Tags are committed by typing Tab. The default delimiter , does not commit. Pressing Tab commits the current text and then moves focus to the next focusable element.

Add tags (Tab commits)

View code

<label for="tags-tab">Add tags (Tab commits)</label>
<input id="tags-tab" type="text" name="items-tab" />
<button type="button" id="next-field-tab">Next field</button>

<script type="module">
  import { Taga11y } from '../dist/taga11y.mjs';

  new Taga11y(document.getElementById('tags-tab'), {
    suggestions: ['Apple', 'Banana', 'Cherry'],
    delimiter: [',', 'Tab'],
  });
</script>