Select menu

Storybook Source

Dropdown field for choosing one option from a list.

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 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.

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 300 (medium) size select as much as possible, especially in forms.

Label size

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.

Label strength

Override the label font weight independently of the label size. Valid values are bold, semibold, medium, and normal.

Accessibility

  • Make sure the label for attribute match the select id.
  • 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-required property and use the validation message for input errors.
  • Select with validation errors should have aria-describedby with the id of the validation message.

Vue API 

import { DtSelectMenu } from '@dialpad/dialtone-vue';

Slots

Name
Type
default

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

Classes

Class
Applies to
Description

Select menu documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope