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

Multiple The same element, enhanced either way — nothing in your markup changes.

Tags Chips you can reorder, with a comma or Enter to finish one.

Creatable Offer what was typed as a new option.

Searchable

Clearable

Hide Selected

Close On Select

Disabled

import { createSelect } from '@devix-labs/select';
import '@devix-labs/select/styles.css';

createSelect(document.querySelector('#target'), {
  placeholder: 'Choose a country',
  multiple: false,
  tags: false,
  creatable: false,
  searchable: true,
  clearable: true,
  hideSelected: false,
  closeOnSelect: true,
  disabled: false
});

import { Select } from '@devix-labs/select/react';
import '@devix-labs/select/styles.css';

<Select
  placeholder="Choose a country"
  searchable
  clearable
  closeOnSelect
/>

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

<template>
  <Select
  placeholder="Choose a country"
  searchable
  clearable
  close-on-select
/>
</template>

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

<div use:select={{
  placeholder: 'Choose a country',
  multiple: false,
  tags: false,
  creatable: false,
  searchable: true,
  clearable: true,
  hideSelected: false,
  closeOnSelect: true,
  disabled: false
}} />

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