Select
A dropdown picker built on a custom button + listbox UI. Sizes, color and visual variants, validation states, slot-overridable label/helper/prefix/suffix, and a clearable trigger. Toggle Vue / CSS to switch the live demo and source together.
Basic
Default select with label, placeholder and helper text.
Vue SFC
Sizes
Small, medium and large.
Vue SFC
Variants
outlined, filled and underlined.
Vue SFC
Colors
All built-in color variants.
Vue SFC
States
Disabled, readonly and required.
Vue SFC
Validation
valid, invalid and warning states with messages.
Vue SFC
Clearable
Clear button shown when a value is selected.
Vue SFC
Slots
Custom label, helper and prefix/suffix content via slots.
Vue SFC
Event: change
Listen to mno-change to react to selection.
Vue SFC
Event log
Live log of mno-change and mno-clear events.
Vue SFC
Customized
Override per-element styling with cssClass (Vue) or utility classes (CSS).
Vue SFC
Custom keys
Use key-value and display-value to feed natural-shape items (for example { id, name }) without pre-mapping. key-value names the property stored in modelValue; omit it to store the whole item object. display-value is either a property name (string) or a (item) => string function — when unset it falls back to item.label.
Vue SFC
DataSource (devextreme)
Bind a live devextreme DataSource with :data-source.prop. The select reads its items and stays reactive to the source's events — so an external ds.filter(...) + ds.load() updates the list with no re-binding. With load-more="scroll" it pages the source one chunk at a time (here pageSize: 5). This example builds the source with mono-utils' monoCreateFetcher against a public OData endpoint (baseUrl, no configBaseUrl). Bind with .prop and use key-value / display-value to map the server fields.
Search
Add searchable to put a search box at the top of the dropdown. With a bound DataSource, typing queries the server (debounced) so the dropdown shows the full matching result set — and load-more="scroll" pages those filtered results; search-value names the field(s) to search ("Nama,Code" or :search-value.prop="['Nama','Code']", falling back to display-value/key-value). With a plain items array it filters client-side. search-operation (default contains), search-debounce (default 300ms) and search-placeholder tune it.
Grouped options
display-group is an array with one accessor per level — a string reads a field off the row, a function receives the row (:display-group.prop="['Nama', (row) => row.Code]") — used as both the group key and the header label. Selection, key-value and display-value work as usual on the leaf rows. There are two ways to feed it:
group (recommended for a DataSource). Pass a plain, paginated source — no group in its request, so paging stays on — and add the boolean group prop. mono-select fetches flat rows page by page (so load-more="scroll" / "button" keep working) and buckets the accumulated rows by display-group in the browser. Scroll the dropdown to load more — groups grow in place; each request is a normal $skip/$top page (never $apply=groupby). Add group-sticky to pin each group header to the top while its rows scroll past (nested levels stack):
group also works on a static array — 1,200 records generated with map, grouped two levels (team → role) with sticky headers; load-more="scroll" reveals a chunk at a time so the big list never renders all at once:
Pre-grouped data. If your data is already nested as { key, items }, omit group and the component renders it directly. group-key / group-items name the key and child-array fields (default 'key' / 'items'; camelCase forms too). This static array uses custom group-key="k" / group-items="rows":
Width & height
Set width, height, min-width, max-width, min-height or max-height — each takes a CSS string ("260px", "80%") or a number (px). This sizes the field (distinct from dropdownHeight/dropdownMaxHeight, which size the popup).
Vue SFC
Types
Import
import { SelectProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
modelValue | unknown | — | The currently selected value. |
value | unknown | — | Alias for the selected value, kept in sync with modelValue. |
items | string | SelectItem[] | [] | List of selectable items, as an array or JSON string. |
dataSource | SelectDataSource<SelectItem> | — | DataSource used to drive the item list, taking precedence over items. |
immediate | boolean | true | Auto-load the DataSource on attach when it has no items yet. |
loadMore | '' | 'button' | 'scroll' | boolean | — | Incremental loading mode: scroll, button, or off. |
pageSize | number | 10 | Chunk size used when paging a plain items array. |
keyValue | string | '' | Item property name used as the model value. |
displayValue | string | (item: SelectItem) => string | '' | Item property name or function used to derive display text. |
displayGroup | SelectDisplayGroup | [] | Per-level accessors for grouped options (header label per group level). |
groupKey | string | 'key' | Field holding a group node's key (default 'key'). |
groupItems | string | 'items' | Field holding a group node's child array (default 'items'). |
searchable | boolean | false | Turn the field itself into a search input (combobox); server query when a DataSource is bound. |
searchValue | string | string[] | '' | Field(s) the search matches (server `searchExpr` + client filter target). |
searchOperation | string | 'contains' | devextreme search operation for server search (default 'contains'). |
searchDebounce | number | 300 | Debounce (ms) before a server search fires (default 300). |
searchPlaceholder | string | '' | Placeholder shown in the field while it is open/searching (falls back to `placeholder`). |
group | boolean | false | Group a plain, paginated DataSource client-side (keeps scroll/load-more). |
groupSticky | boolean | false | Keep group headers pinned to the top while their rows scroll. |
dropdownHeight | string | number | '' | Fixed height of the scrollable dropdown list. |
dropdownMaxHeight | string | number | '' | Maximum height of the scrollable dropdown list. |
size | 'sm' | 'md' | 'lg' | 'md' | Visual size of the select. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | Color theme applied to the select. |
variant | 'underlined' | 'outlined' | 'filled' | 'outlined' | Visual style variant of the select. |
label | string | '' | Text label shown above the select. |
placeholder | string | 'Select option' | Placeholder text shown when no value is selected. |
helperText | string | '' | Helper text shown below the select. |
validationState | 'warning' | 'default' | 'valid' | 'invalid' | 'default' | Validation state controlling the select's appearance. |
validationMessage | string | '' | Validation message shown below the select. |
errorMessage | string | '' | Error message shown below the select. |
successMessage | string | '' | Success message shown below the select. |
name | string | '' | Form field name submitted with the value. |
disabled | boolean | false | Disables the select, preventing interaction. |
readonly | boolean | false | Makes the select read-only, blocking value changes. |
required | boolean | false | Marks the select as required and shows a required indicator. |
clearable | boolean | false | Shows a clear button to reset the selected value. |
ariaLabelText | string | — | Accessible label used when no visible label is present. |
ariaLabel | string | — | — |
width | string | number | — | Explicit sizing of the field. Each accepts a CSS length string (`"320px"`, `"80%"`) or a number (interpreted as px). Use `width="100%"` for full width. (Distinct from `dropdownHeight`/`dropdownMaxHeight`, which size the popup.) |
height | string | number | — | — |
minWidth | string | number | — | — |
maxWidth | string | number | — | — |
minHeight | string | number | — | — |
maxHeight | string | number | — | — |
cssClass | SelectCssClass | {} | Custom CSS classes applied to internal select parts. |