Tags

<form class="demo" onsubmit="event.preventDefault()">
  <div class="demo-field">
    <label class="demo-label" for="labels">Labels <span class="demo-hint">· Enter, comma, or paste “design, urgent”</span></label>
    <input id="labels" name="labels">
  </div>
  <p class="demo-out" id="out">Posts nothing yet</p>
</form>

import { createSelect } from 'https://www.devix.pk/cdn/oss/select@1.0.0/index.js';

const out = document.getElementById('out');
createSelect(document.getElementById('labels'), {
  tags: true,
  name: 'labels',
  separators: ['Enter', ',', 'Tab'],
  placeholder: 'Add a label',
  options: [
    { value: 'design', label: 'design' },
    { value: 'research', label: 'research' },
    { value: 'urgent', label: 'urgent' },
    { value: 'backend', label: 'backend' },
  ],
  // Refuse a tag instead of adding a bad one: the return value decides.
  creatable: (text) => (text.length < 2 ? null : { value: text.toLowerCase(), label: text.toLowerCase() }),
  onChange: (values) => (out.textContent = values.length ? `labels=${values.join(',')}` : 'Posts nothing yet'),
});

@import url('https://www.devix.pk/cdn/oss/select@1.0.0/select.min.css');