React, Vue, Svelte and the rest

One DOM core under every wrapper, so behaviour, keyboard and ARIA are identical everywhere.

React#

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

<Select
  name="country"
  options={countries}
  value={country}
  onChange={(value) => setCountry(value as string)}
  searchable
  placeholder="Country"
/>

It renders a real <select> and enhances it after mount, so server rendering produces a working control and hydration matches. Controlled (value + onChange) and uncontrolled (defaultValue) both work; pass multiple or tags for arrays.

Vue#

<script setup>
import { Select } from '@devix-labs/select/vue';
const country = ref('pk');
</script>

<template>
  <Select v-model="country" name="country" :options="{ options: countries, searchable: true }" />
</template>

Svelte#

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

<select use:select={{ options: countries, searchable: true }} name="country"></select>

Web component#

<script type="module" src="https://devix.pk/cdn/oss/select@1.0.0/element.js"></script>

<dx-select name="country" searchable>
  <select>…</select>
</dx-select>

Form-associated: it takes part in <form> submission, validation and FormData without a hidden input.

jQuery, and pages on select2#

<script src="https://devix.pk/cdn/oss/select@1.0.0/jquery.js"></script>
<script>
  $('#country').devixSelect({ searchable: true });
</script>

If nothing else has claimed $.fn.select2, the adapter registers it and translates the options people actually use — placeholder, allowClear, multiple, tags, minimumInputLength, minimumResultsForSearch, data and ajax. See Migrating.

Laravel, Livewire, Alpine and Inertia#

The enhanced <select> fires native input and change, so wire:model, x-model and Inertia forms bind to it with no adapter at all.