DtSelectMenu is bound to a value using v-model, which emits the selected option's value. To wire DtSelectMenu to a reactive store (such as Vuex or Pinia), bind :modelValue to the store getter and listen for @update:modelValue to commit the mutation — or use v-model with a computed setter.
Do
Use sparingly — only when a user needs to choose from about seven to 15 possible options, and you have limited space to display the options.
Don’t
For site navigation.
If the list of options is very short. Use Radio instead.
If the list of options is very long. Let users type the same information into an Input that suggests possible options instead (aka Combobox).
Avoid using the multiple attribute. Users often don't understand how to select multiple items from the select element (e.g. by holding down a modifier key).
For selecting an action that takes immediate effect. A select is for selecting a choice that is only confirmed by a separate submit action (much like a Checkbox). For immediate actions consider the Dropdown component.
Selects should be considered the "UI of last resort," as users often find them confusing and difficult to use. Consider testing thoroughly with members of your target audience.
Avoid making options in one dropdown menu change based on the input to another. Users often don't understand how selecting an item in one impacts another.
When most users will (or should) pick a particular option, make it the default selection.
Avoid auto-submission. Be wary of UI implications of automatically submitting upon selection or applying its value. Users may often change their choices multiple times, particularly if interacting with a form solely with keyboard. Auto-submission is also less accessible. For auto-submission consider the Dropdown component.
We offer different sizes for instances in which the interface requires a smaller or larger select. In general, though, use the base 300 (medium) size select as much as possible, especially in forms.
The label text size is automatically derived from the component's size prop. Use the label-size prop to override this when you need a different label size independent of the select size. For example, the default label size for a :size="300" select menu is 300, but you can override it from 100 to 400.
Slot for select menu options, defaults to options prop
description
Slot for description, defaults to description prop
label
Slot for label, defaults to label prop
Props
Name
Default
Type
description
''
string
Description for the select.
Can also be overridden with a slot of the same name.
descriptionChildProps
{}
object
A set of props that are passed into the description container
descriptionClass
''
string|array|object
Used to customize the description container
disabled
false
"true"
|
"false"
Disabled state of the select
label
''
string
Label for the select.
Can also be overridden with a slot of the same name.
labelChildProps
{}
object
A set of props that are passed into the label container
labelClass
''
string|array|object
Used to customize the label container
labelSize
null
"100"
|
"200"
|
"300"
|
"400"
Overrides the label text size. When not provided, the label size
is derived from the component size prop.
labelStrength
null
"bold"
|
"semibold"
|
"medium"
|
"normal"
Overrides the label font weight.
messages
[]
array
Validation messages
messagesChildProps
{}
object
A set of props that are passed into the validation messages component
messagesClass
''
string|array|object
Used to customize the validation messages component
modelValue
''
string|number
The value of the select menu
optionChildProps
{}
object
A set of props that are passed into each option, should options be provided via prop
optionClass
''
string|array|object
Used to customize each option, should options be provided via prop
options
[]
array
Select Menu Options, overridden by default slot. Each option has the following structure:
{ value: number || string (required), label: string (required) }
selectClass
''
string|array|object
Used to customize the select
showLabel
true
"true"
|
"false"
Determines visibility of select label.
showMessages
true
"true"
|
"false"
Used to hide / show the validation messages
size
300
"100"
|
"200"
|
"300"
|
"400"
|
"500"
Controls the size of the select
Events
Name
Type
update:modelValue
String | Number
Event fired to sync the modelValue prop with the parent component