Custom theme

All visual properties are controlled by CSS custom properties on .taga11y. Add a custom class to the wrapper after init to apply a per-instance theme without affecting other instances.

Vegetable garden

View code

<label for="tags">Vegetable garden</label>
<input id="tags" type="text" name="vegetables" />

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

  const input = document.getElementById('tags');

  new Taga11y(input, {
    suggestions: [
      'Artichoke', 'Beetroot', 'Broccoli', 'Carrot', 'Courgette',
      'Cucumber', 'Garlic', 'Kale', 'Leek', 'Onion',
      'Pepper', 'Potato', 'Spinach', 'Tomato', 'Turnip',
    ],
  });

  // Add custom class to the wrapper after init
  input.closest('.taga11y').classList.add('theme-green');
</script>