Tags

<form class="demo" onsubmit="event.preventDefault()">
  <div class="demo-field">
    <label class="demo-label" for="labels">Labels <span class="demo-hint">· try pasting “design, urgent, backend”</span></label>
    <input id="labels" name="labels">
  </div>
  <p class="demo-out" id="out">labels=</p>
</form>

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

const out = document.getElementById('out');
createCombobox(document.getElementById('labels'), {
  name: 'labels',
  placeholder: 'Add a label',
  separators: ['Enter', ',', 'Tab'],
  options: [
    { value: 'design', label: 'design' },
    { value: 'research', label: 'research' },
    { value: 'urgent', label: 'urgent' },
    { value: 'backend', label: 'backend' },
    { value: 'frontend', label: 'frontend' },
  ],
  value: ['design'],
  onChange: (values) => (out.textContent = `labels=${values.join(',')}`),
});
out.textContent = 'labels=design';

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

.dxs { --dxs-chip-bg: #eef2ff; --dxs-chip-text: #3730a3; }
.dxs[data-theme='dark'] { --dxs-chip-bg: #27274a; --dxs-chip-text: #c7d2fe; }