Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Single One value instead of a row of chips.

Creatable Keep anything typed that is not on the list.

Max Tags 0 for no limit.

Reorder Drag the chips into the order you want.

Clearable

Searchable

Placeholder

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

createCombobox(document.querySelector('#target'), {
  options: [
    {"value":"laravel","label":"Laravel"},
    {"value":"react","label":"React"},
    {"value":"vue","label":"Vue"},
    {"value":"svelte","label":"Svelte"},
    {"value":"typescript","label":"TypeScript"},
    {"value":"tailwind","label":"Tailwind CSS"}
  ],
  single: false,
  creatable: true,
  maxTags: 0,
  reorder: true,
  clearable: true,
  searchable: true,
  placeholder: 'Add a skill'
});

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

<Combobox
  options={[{"value":"laravel","label":"Laravel"},{"value":"react","label":"React"},{"value":"vue","label":"Vue"},{"value":"svelte","label":"Svelte"},{"value":"typescript","label":"TypeScript"},{"value":"tailwind","label":"Tailwind CSS"}]}
  creatable
  maxTags={0}
  reorder
  clearable
  searchable
  placeholder="Add a skill"
/>

<script setup>
import { Combobox } from '@devix-labs/combobox/vue';
import '@devix-labs/combobox/styles.css';
</script>

<template>
  <Combobox
  :options="[{&quot;value&quot;:&quot;laravel&quot;,&quot;label&quot;:&quot;Laravel&quot;},{&quot;value&quot;:&quot;react&quot;,&quot;label&quot;:&quot;React&quot;},{&quot;value&quot;:&quot;vue&quot;,&quot;label&quot;:&quot;Vue&quot;},{&quot;value&quot;:&quot;svelte&quot;,&quot;label&quot;:&quot;Svelte&quot;},{&quot;value&quot;:&quot;typescript&quot;,&quot;label&quot;:&quot;TypeScript&quot;},{&quot;value&quot;:&quot;tailwind&quot;,&quot;label&quot;:&quot;Tailwind CSS&quot;}]"
  creatable
  :max-tags="0"
  reorder
  clearable
  searchable
  placeholder="Add a skill"
/>
</template>

<script>
  import { combobox } from '@devix-labs/combobox/svelte';
  import '@devix-labs/combobox/styles.css';
</script>

<div use:combobox={{
  options: [
    {"value":"laravel","label":"Laravel"},
    {"value":"react","label":"React"},
    {"value":"vue","label":"Vue"},
    {"value":"svelte","label":"Svelte"},
    {"value":"typescript","label":"TypeScript"},
    {"value":"tailwind","label":"Tailwind CSS"}
  ],
  single: false,
  creatable: true,
  maxTags: 0,
  reorder: true,
  clearable: true,
  searchable: true,
  placeholder: 'Add a skill'
}} />

Every option here is in the documentation, along with the ones that are not worth a control.