Getting started

A tags field that behaves: type, paste or pick; chips you can edit, reorder and remove; and a value your form posts.

npm install @devix-labs/combobox

<label for="labels">Labels</label>
<input id="labels" name="labels">

import { createCombobox } from '@devix-labs/combobox';
import '@devix-labs/combobox/styles.css';

const labels = createCombobox(document.querySelector('#labels'), {
  placeholder: 'Add a label',
  separators: ['Enter', ',', 'Tab'],
  options: existingLabels,          // suggestions, if you have any
});

Or from the CDN, with no build step:

<link rel="stylesheet" href="https://devix.pk/cdn/oss/combobox@1.0.0/select.min.css">
<script type="module">
  import { createCombobox } from 'https://devix.pk/cdn/oss/combobox@1.0.0/index.js';
  createCombobox(document.querySelector('#labels'));
</script>

What you get#

• Enter, comma, Tab — or whatever you put in separators — finish a tag. Pasting design, urgent makes two chips and leaves anything unfinished in the field.
• Double-click a chip to put its text back, selected, and fix it.
• Drag chips into the order you mean; the value follows.
• Backspace removes the last chip. The field never turns back into raw text.
• Suggestions from options, searched with the same folding as @devix-labs/select: accents, Arabic and Urdu spellings, keywords.
• validate to clean up or refuse text before it becomes a tag.
• Remote suggestions through load, debounced, aborted and cached.

Reading the value#

labels.getValue();      // ['design', 'urgent']
labels.setValue(['design']);
labels.clear();

onChange and the dx:selectchange event both fire with the values; the hidden input keeps them comma-separated for a plain form post, and <dx-combobox> posts name[] properly.

A single-value combobox#

createCombobox(input, { single: true });

One value instead of chips, still free text — the "pick one or type your own" field.