Select

input

Select menus display a list of choices in a dropdown, allowing users to make a single selection from the options.

Variants

Filled

Default

Select with filled background

Outlined

Select with outlined border

Properties

Name Type Required Default Description
variant enum - filled Visual style of the select
label string - - The floating label text
value string - - The currently selected value
disabled boolean - - Whether the select is disabled
required boolean - - Whether selection is required
error boolean - - Whether the select is in error state
errorText string - - Error message to display
supportingText string - - Helper text below the select
quick boolean - - Skip menu animations
name string - - The HTML name for form submission

States

enabled

Default interactive state

disabled

Non-interactive state

focused

Keyboard focus state

error

Validation error state

open

Dropdown menu is open

Accessibility

Role: combobox
Keyboard Support:
  • Enter/Space - Open dropdown
  • ArrowDown - Open dropdown or move to next option
  • ArrowUp - Move to previous option
  • Home - Move to first option
  • End - Move to last option
  • Escape - Close dropdown
  • Character - Type-ahead selection
Screen Reader Notes: Announce label, selected value, and expanded state. Options should be announced when navigated.

LLM Context

Intent: Allow single selection from a dropdown list of options
Anti-Patterns:
  • Select without label
  • Select for very few options (use radio)
  • Select for binary choice (use switch)
  • Placeholder as only label
Example Usage: 
<md-filled-select label="Country"><md-select-option value="us">United States</md-select-option><md-select-option value="ca">Canada</md-select-option></md-filled-select>
<md-outlined-select label="Size" required><md-select-option value="s">Small</md-select-option><md-select-option value="m">Medium</md-select-option></md-outlined-select>