Guide
Migrating
From select2
The one-line version, for a page that already loads jQuery:
<!-- was: select2.min.js + select2.min.css, and jQuery -->
<link rel="stylesheet" href="https://devix.pk/cdn/oss/select@1.0.0/select.min.css">
<script type="module" src="https://devix.pk/cdn/oss/select@1.0.0/jquery.js"></script>
$('#el').select2({ … }) keeps working: the adapter maps the options people actually use.
| select2 | Here |
|---|---|
placeholder (string or { text }) |
placeholder |
allowClear |
clearable |
multiple |
multiple |
tags: true |
creatable: true |
closeOnSelect |
closeOnSelect |
minimumInputLength |
minChars |
minimumResultsForSearch |
searchThreshold, or searchable: false for Infinity |
data: [{ id, text, children }] |
options: [{ value, label, group }] |
ajax: { url, delay, processResults } |
load(query, { signal, cursor }) |
$el.val(x).trigger('change') |
instance.setValue(x) — or keep using the <select>, which is still there |
templateResult / templateSelection |
render.option / render.item (nodes, not HTML strings) |
$el.on('select2:select') |
dx:selectchange, or the native change on your <select> |
Dropping jQuery altogether is the bigger win: createSelect(el, {…}) is the same call without the 29.6 kB.
From Choices.js
new Choices(el, { searchEnabled, removeItemButton, maxItemCount, choices }) becomes
createSelect(el, { searchable, clearable, maxSelected, options }). Two Choices complaints go away by
themselves: group headings stay visible while you search, and the dropdown can't be clipped by a
scrolling parent because it renders in the top layer.
From Tom Select
new TomSelect(el, { create, maxItems, plugins: ['remove_button'], load }) becomes
createSelect(el, { creatable, maxSelected, load }) — the remove button, the clear button and the
virtualised list are not plugins here.
From react-select
// was
<ReactSelect options={options} value={value} onChange={(o) => setValue(o?.value)} isMulti isClearable />
// now
<Select options={options} value={value} onChange={setValue} multiple clearable />
Options are { value, label } in both. The differences worth knowing: this one renders a real
<select> (so forms and SSR just work), styling is CSS variables and classNames rather than emotion,
and there is no styles prop to fight — see Styling.