A select menu is an input control that allows users to choose one option from a list.
Preview
Usage
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
multipleattribute. 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
selectis for selecting a choice that is only confirmed by a separate submit action (much like a Checkbox). For immediate actions consider the Dropdown component.
Best Practices
- 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.
Variants
Base
A select is normally paired with a label, but there are times when it can be used without a label. Don't rely on the placeholder text as a label.
With Description Text
With Validation States
Provides feedback to the user based on their interaction, or lack thereof, with a select.
With Validation States Hidden
With Slotted Label
With Slotted Description
With Slotted Options
Sizes
We offer different sizes for instances in which the interface requires a smaller or larger select. In general, though, use the base (medium) size select as much as possible, especially in forms.
Accessibility
- Make sure the
labelforattribute match the selectid. - Avoiding removing
labels. Labelled selects are user-friendly. - Avoid relying on placeholder text as a substitute for a label.
- Avoid customizing the placeholder text.
- If the select is a required field, use the
aria-requiredproperty and use the validation message for input errors. - Select with validation errors should have
aria-describedbywith theidof the validation message.