Components/Form components

ESelect Select

import EUI 1.0

Examples

Select

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 ESelect { multiple: true clearable: true filterable: true multipleLimit: 3 allowCreate: true textRole: "label" collapseTags: true valueRole: "value" popupFooter: Component { EText { padding: 8 text: qsTr("Choose up to three items") } } tagDelegate: Component { ETag { closable: true size: EStyle.Small text: parent.label styleType: EStyle.Success onClosed: parent.remove() } } model: [{label: "Desktop", options: [{label: "Qt", value: "qt"}, {label: "QML", value: "qml"}]}, {label: "Web", options: [{label: "Vue", value: "vue"}, {label: "TypeScript", value: "ts"}]}] } ESelect { remote: true filterable: true textRole: "label" valueRole: "value" remoteMethod: function(query) { return Promise.resolve([{label: "Qt", value: "qt"}, {label: "QML", value: "qml"}, {label: "Vue", value: "vue"}] .filter(function(item) { return item.label.toLowerCase().indexOf(query.toLowerCase()) >= 0 })) } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Selection and clearing

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESelect { clearable: true model: ["Beijing", "Shanghai", "Shenzhen"] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Selection and clearing

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESelect { clearable: true model: exampleData.models.ManyOptions }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

allowCreatebool

Allow unmatched input to become a new option.

Defaultfalse

clearablebool

Show a clear action; ratings may be cleared by clicking the current score again.

Defaultfalse

collapseTagsbool

Collapse excess selected tags.

Defaultfalse

currentIndexint

Index of the current selected or displayed item.

-1: no selection
0 and above: item index

Default-1

debounceint

Delay, throttling or automatic close time in milliseconds; 0 means no delay or no timed close.

Default300

editablebool

Allow input editing or enable both tab addition and closing.

Defaultfalse

emptyValuesvar

Values treated as empty; includes undefined, null and the empty string by default.

DefaultInherited; default [undefined, null, ""]

enabledbool

Allow interaction; false disables the control.

Defaulttrue

filterMethodvar

Custom filter callback using the current component's filtering arguments and result.

Defaultnull

filterablebool

Allow keyword filtering.

Defaultfalse

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

indentRolestring

Object field used for text, values, child nodes or indentation.

Default""

loadingbool

Whether the component is loading.

Defaultfalse

loadingTextstring

Loading-state text.

DefaultLocalized text

maxCollapseTagsint

Maximum directly visible tags when collapsing.

Default1

modelvar

Option array; textRole and valueRole map object labels and values, with disabled and options groups supported.

Default[]

multiplebool

Allow multiple selection.

Defaultfalse

multipleLimitint

Maximum selections.

0: unlimited
Positive number: limit

Default0

noDataTextstring

Text displayed when no data is available.

DefaultLocalized text

noMatchTextstring

Text displayed when filtering finds no matches.

DefaultLocalized text

optionDelegateComponent

Component slot for custom option; null uses the default content. See this page’s examples for delegate context.

Defaultnull

placeholderTextstring

Placeholder shown when the value is empty.

DefaultLocalized text

popupFooterComponent

Component slot for a panel footer or popup header/footer. See this page’s examples for delegate context.

Defaultnull

popupHeaderComponent

Component slot for a panel footer or popup header/footer. See this page’s examples for delegate context.

Defaultnull

querystring

Current filtering or search query.

Default""

remotebool

Use remote search instead of local filtering.

Defaultfalse

remoteMethodvar

Remote query callback receiving a keyword and returning options or a Promise.

Defaultnull

reserveKeywordbool

Keep the search keyword after selection.

Defaulttrue

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

tagDelegateComponent

Component slot for custom tag item; null uses the default content. See this page’s examples for delegate context.

Defaultnull

textRolestring

Object field used for text, values, child nodes or indentation.

Default""

validateEventbool

Request enclosing-form validation when the value changes.

Defaulttrue

validationMessagestring

Validation message or externally supplied error text.

Default""

validationStateint

Input validation state.

EValidationState.None
EValidationState.Success
EValidationState.Warning
EValidationState.Error

DefaultEValidationState.None

valuevar

Current value; read or write through property bindings, with arrays for multiple or range selection.

Defaultundefined

valueKeystring

Option value field or unique identifier for object values.

Default"value"

valueOnClearvar

Value after clearing, or a function returning it; inherits configuration by default.

DefaultInherited; default undefined

valueRolestring

Object field used for text, values, child nodes or indentation.

Default""

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

advancedboolRead only

Whether select uses advanced mode for multiple selection, filtering or custom delegates.

DefaultComputed at runtime

emptyboolRead only

Whether the current value is considered empty.

DefaultComputed at runtime

groupedboolRead only

Whether the select model contains option groups.

DefaultComputed at runtime

hasValidationErrorboolRead only

Whether validation state is Error.

DefaultComputed at runtime

selectedValuesvarRead only

Selected values in multiple select mode.

DefaultComputed at runtime

sourceOptionsvarRead only

Normalized suggestion or selection options.

DefaultComputed at runtime

visibleOptionsvarRead only

Select options visible after filtering.

DefaultComputed at runtime

Signals

SignaturePurpose

cleared()

Emitted after the contents are cleared with the clear action.

changed(var value)

Emitted when the selection changes; value is the new value.

removedTag(var value)

Emitted when a selected tag is removed; value is the removed option value.

searchFailed(string message)

Emitted when fetching suggestions fails; message explains why.

Methods

SignaturePurpose

isSelected(key)

Return whether the option identified by the given key is selected.

clear()

Clear the current contents or selection.

labelFor(key)

Return the display label for the specified value.

removeValue(key)

Remove the value identified by key from the multi-selection.

requestRemote()

Fetch remote options for the current search text.

selectValue(key)

Select an option by its value.