Skip to content
Devix Open Source
Search products /
devix.pk

Reference

Options

Everything createSelect(target, options) accepts. Every option has a sensible default; the common case is createSelect(el).

Option Type Default What it does
options SelectOption[] from the <select> The choices.
value string | string[] | null from the <select> Initial selection.
multiple boolean the <select>'s Several values, shown as chips.
tags boolean false Free text becomes chips. Implies multiple, creatable and searchable.
separators string[] ['Enter', ','] Keys and characters that finish a tag. 'Tab' is supported.
placeholder string the empty option's text Shown when nothing is chosen.
searchable boolean | 'auto' 'auto' auto switches on above searchThreshold options, or whenever load is set.
searchThreshold number 8 Where 'auto' turns search on.
clearable boolean true The clear button.
disabled boolean the control's Starts disabled.
maxSelected number — Stop after this many; the list says so.
closeOnSelect boolean !multiple Close the panel after a choice.
hideSelected boolean multiple Take chosen options out of the list.
fuzzy boolean true Subsequence matching when nothing matches outright ("bsa" → "Bosnia and Herzegovina").
preserveOrder boolean false Keep your order while searching instead of ranking by score.
pinned string[] [] Values kept at the top.
groups string[] from the <optgroup>s Heading order.
creatable boolean | (query) => SelectOption | null tags Offer the typed text as a new option.
load (query, { signal, cursor }) => Promise — Fetch options from your server. See Remote data.
minChars number 0 Don't call load until this many characters.
debounce number 200 Milliseconds after the last keystroke.
name string — Name of the hidden input, when you aren't enhancing a <select>.
virtual boolean | number 60 Draw only the rows in view.
panelWidth 'anchor' | 'auto' | number 'anchor' Match the control, hug the options, or a fixed width.
theme 'light' | 'dark' | 'auto' 'auto' auto follows the page.
sheet 'auto' | boolean 'auto' Bottom sheet on touch phones.
classNames Partial<Record<SelectPart, string>> — Your classes on every part. See Styling.
icons { chevron, clear, check, remove } built-in SVG Replacement markup.
strings Partial<SelectStrings> English Every word the widget says.
render { option, item, group, empty } — Your own markup per row. See Templates.
onChange (values, instance) => void — Same data as dx:selectchange.
onOpen / onClose (instance) => void — Panel opened or closed.
onSearch (query, instance) => void — The query changed.
onCreate (option, instance) => void — A new option was made.

One option

interface SelectOption<Data = unknown> {
    value: string;          // what the form posts
    label: string;          // what people read
    description?: string;   // a second line: a dial code, an email, a SKU
    keywords?: string[];    // extra words that should find it: 'UAE', 'Emirates', '971'
    group?: string;         // heading it lives under
    disabled?: boolean;
    data?: Data;            // your own payload, handed back to templates and getSelected()
}

In markup, description and keywords come from data-description and data-keywords (| or , separated).

The instance

Method Does
getValue() string for single, string[] for multiple, null when empty.
setValue(value, silent?) Set it; silent skips the change event.
getSelected() The chosen options, not just their values.
getOptions() / setOptions(list) Read or replace the list.
addOption(option, at?) / removeOption(value) One at a time.
refresh() Re-read the <select> after your own code changed it.
open() / close() / toggle() The panel.
focus() / clear() / search(query)
enable() / disable()
destroy() Removes the widget and restores the original control.

Events

All bubble from the widget's root element, and carry detail:

Event detail
dx:selectchange { values: string[], options: (SelectOption | null)[] }
dx:selectopen / dx:selectclose —
dx:selectsearch { query: string }
dx:selectcreate { option: SelectOption }

The <select> you enhanced also fires native input and change, so jQuery, Livewire, Alpine and form libraries that listen to it need no adapter.

Updated 12 Sep 2026