All custom events

Every taga11y custom event is wired to the log below. Each entry includes the event name and its detail payload. Use this page to inspect event timing and payloads.

Fruits

Try: type "ap" then comma → add + change. Backspace an empty input to remove the last chip → remove + change. Click "setTags" → clear + adds + change. Paste "apple,banana,grape" → add per chunk + change + paste.

Event log (0)

View code

<label for="tags">Fruits</label>
<input id="tags" type="text" name="fruits" />

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

  const input = document.getElementById('tags');
  const taga = new Taga11y(input, {
    suggestions: ['apple', 'banana', 'cherry', 'grape', 'kiwi', 'lemon', 'mango', 'orange', 'pear'],
    maxTags: 6,
  });

  taga.on('taga11y:add',     (e) => console.log('add',     e.detail.tag));
  taga.on('taga11y:remove',  (e) => console.log('remove',  e.detail.tag));
  taga.on('taga11y:clear',   (e) => console.log('clear',   e.detail.tags.length));
  taga.on('taga11y:change',  (e) => console.log('change',  e.detail.tags));
  taga.on('taga11y:paste',   (e) => console.log('paste',   e.detail.added, e.detail.skipped));
  taga.on('taga11y:destroy', (e) => console.log('destroy', e.detail));
</script>