Select

Dropdown for choosing one or more options from a predefined list. Use Select for enums, filters, and form fields where free text is not needed.

#
Usage

Basic example with common props.

Simple native select

Placeholder

Helper text

Filterable - virtual list

Custom input

Helper text

#
Multiple

Selecting more than one option at once.

Multi select

Multi select - truncate

Multi select - checkbox

Multi select - checkbox - prefix items

#
Size

Size options from xs to lg.

#
States

Disabled, loading, and other interactive states.

Disabled

Read Only

Error

Invalid input

#API

Select

props

Name	Description	Type	Default	Values
color	Theme or CSS color used for the control accents.	String	secondary
size	Control size. One of xs, sm, md, lg, xl.	String	md	xssmmdlgxl
disabled	Disables interaction and applies disabled styling.	Boolean	false
loading	Shows a loading indicator and blocks interaction.	Boolean	false
loadingLabel	Accessible label announced while loading.	String
loadingStatus	Loader visual status (for example active or indeterminate).	String	active
modelValue	Bound value (v-model).	String Number Boolean Object Array
id	Native id attribute for the input element.	String
name	Native name attribute for form submission.	String
readonly	Makes the field read-only without disabling it.	Boolean	false
required	Marks the field as required for validation.	Boolean	false
validateOnInput	Runs validation on each input event when true.	Boolean	true
label	Visible label text for the field.	String
helper	Helper text shown below the field.	String
error	External error message; overrides rule errors when set.	String
hideFooter	Hides the footer area (helper / error).	Boolean	false
rules	Validation rule functions or rule descriptors.	Array	() => []
tooltip	Optional tooltip text next to the label.	String
skipFormRegistry	Skips registering this field with a parent x-form.	Boolean	false
placeholder	Placeholder shown when no option is selected.	String
options	Available options (`value`, `label`, optional prefix/suffix/disabled).	Array
multiple	Allows selecting more than one option.	Boolean	false
multipleCheckbox	Multiple selection with checkbox-style items.	Boolean	false
truncate	Truncates selected labels when space is limited.	Boolean	false
flat	Removes elevation and border emphasis on the trigger.	Boolean	false
native	Renders a native HTML select instead of the custom popover.	Boolean	false
filterable	Shows a filter input inside the options list.	Boolean	false
clearable	Shows a clear control when a value is selected.	Boolean	false
filterPlaceholder	Placeholder for the filter input when `filterable` is enabled.	String	Filter by...
filterablePrefix	Includes option prefixes when filtering.	Boolean	false
filterableSuffix	Includes option suffixes when filtering.	Boolean	false
hideSelectedOptionSlots	Hides prefix/suffix slots on the selected value display.	Boolean	false
virtualList	Virtualizes the options list for large datasets.	Boolean	false
virtualListOffsetTop	Extra top offset (px) for the virtual list viewport.	Number
virtualListOffsetBottom	Extra bottom offset (px) for the virtual list viewport.	Number
virtualListItemHeight	Estimated row height (px) used by the virtual list.	Number	33
virtualListOverscan	Extra rows rendered above/below the visible virtual list window.	Number	10
placement	Popover placement for the options menu.	String
filter
filterModifiers

slots

Name	Description
prefix	Prefix content for an option or the selected value (`item`).
suffix	Suffix content for an option or the selected value (`item`).
label	Custom label content for an option (`item`).
input	Custom trigger content (popover, selected value, disabled, label).
content-header	Content above the options list (default includes the filter).
content-footer	Content below the options list.
icon	Custom chevron/icon on the trigger.

emits

Name	Description
update:modelValue	Emitted when the bound value changes (v-model).
blur	Emitted when the field loses focus.
focus	Emitted when the field receives focus.
input	Emitted on native input events.
change	Emitted when the value is committed (change).
close	Emitted when the options popover closes.
open	Emitted when the options popover opens.
update:filter

methods

Name	Description
focus	Focus the underlying control.
blur	Remove focus from the underlying control.
reset	Reset the field value and validation state.
validate	Run validation rules and return whether the field is valid.
setError	Set an external error message on the field.

radio

slider

Select

#Usage

#Multiple

#Size

#States

#API

Select

props

slots

emits

methods

#
Usage

#
Multiple

#
Size

#
States