Select

A drop-down menu, or select menu, allows the user to choose from a list of options presented in a collapsible format. Drop-downs are ideal when you have many options to present but want to save space on the form.

Usage

cv-select_hero

When to use

Use drop-down menus when you need to present the user with a large set of options that would be impractical to display in full on the page. For smaller sets of options (e.g., yes/no or a handful of options), consider using radio buttons or toggles.

Variant

Purpose

Select

To provide a compact way for users to choose from a large list of options, saving space and keeping the interface clean

Recommendations

Recommended practices ensure clear guidance, usability, accessibility, appropriate sizing, and user support.

Do and don't guidance
Do

Use a drop-down menu for long lists of options, such as selecting a country, state, or payment method.

Don't

Use drop-down menus for small sets of options — use radio buttons or a toggle instead.

Do and don't guidance
Do

Ensure that the label is clear and concise.

Don't

The label should not be a verb phrase.

Do:

  • Ensure the list of options is clearly labeled and sorted logically (e.g., alphabetically or by frequency of use).

Usage — additional resources

Style

Anatomy

cv-select_anatomy

  1. Either placeholder text prior to user input, or the currently selected option.
  2. Communicates the type of input requested.
  3. Container for the field.
  4. Dropdown icon. Use 'arrow_drop_down' from the Material Symbols collection.
  5. Communicates an in-line error message.

Label behavior

Before a selection has been made, the label should be shown inside the input area. After the select field has been focused, the label should move above the input area to make room for user input.

cv-select_anatomy_label_behavior

Help and errors

The line of text directly underneath the select field should only be used to communicate an in-line error message.

To provide helpful content about the input being requested, use the header and message above the text field.

cv-select_help_and_errors

Menu behavior

To learn about behavior for the menu component that appears when focusing the select component, see the Menu page.

Typography

Use these text styles for select:

  1. body-1
  2. caption
  3. caption

cv-select_typography

Content guidelines

Drop-downs help users navigate large option sets efficiently. Content labels guide accurate selection.

  • Categorization: Options should be logically grouped if exceeding 10.
  • Tone: Use imperative verbs and short phrases to be clear and direct.
  • Word Limit: Label text up to 20 characters. Options should be concise (2-4 words).
Do and don't guidance
Do

Example label: "Country"

Don't

Example label: "Please pick a country from this list"

States

Enabled

cv-select_anatomy_enabled

Anatomy

Color token

1

on-surface

2, 4, 5

on-surface-variant

3

outline

Hovered

cv-select_anatomy_hovered

Anatomy

Color token

1, 2, 3

on-surface

4, 5

on-surface-variant

Focused

cv-select_anatomy_focused

Anatomy

Color token

1

on-surface

2, 3

primary

4, 5

on-surface-variant

Error

cv-select_anatomy_error

Anatomy

Color token

1

on-surface

2, 3, 5

negative

4

on-surface-variant

Error focused

cv-select_anatomy_error_focused

Anatomy

Color token

1

on-surface

2, 3, 5

negative

4

on-surface-variant

Disabled

cv-select_anatomy_error_disabled

Anatomy

Color token

1, 2, 4, 5

on-surface-38

3

outline-12

Web components

Props

Prop

Default

Type

Description

label

string

Label for the select

value

string

Current value

validationMessage

string

Validation message

helper

string

Helper text

icon

string

Leading icon

required

false

boolean

Whether selection is required

outlined

false

boolean

Outlined style variant

naturalMenuWidth

false

boolean

Use natural menu width

fixedMenuPosition

false

boolean

Fixed menu position

disabled

false

boolean

Whether the select is disabled

validateOnInitialRender

false

boolean

Validate on initial render

Code example

How to import

Readonly properties

Prop

Default

Type

Details

selected

null

ListItemBase | null

Selected list item element.

items

[]

ListItemBase[]

List of selectable items.

index

-1

number

Index of selected list item.

validity

DefaultValidity *

ValidityState (readonly)

The ValidityState of the select.

validityTransform

null

ValidityTransform | null

Callback called before each validation check.

* DefaultValidity is:

Methods

Method signature

Description

checkValidity() => boolean

Returns true if the select passes validity checks. Returns false and fires an invalid event on the select otherwise. NOTE: When accessing any property or function that checks validity at select initial boot up, you may have to await <cv-select>.updateComplete.

reportValidity() => boolean

Runs checkValidity() method, and if it returns false, then it reports to the user that the input is invalid.

setCustomValidity(message:string) => void

Sets a custom validity message (also overwrites validationMessage). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.

select(index: number) => void

Selects the element at the given index.

layout(updateItems = true) => Promise<void>

Resets tabindex on all items and will update items model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. noninteractive is dynamically set on a list item. Also re-calculates layout. If a select is styled with display:none before it is first rendered, and it has a label that is floating, then you must call layout() the first time you remove display:none, or else the notch surrounding the label will not render correctly.

layoutOptions() => Promise<void>

Synchronizes the list of options with the model of the component and updates the selected text. Call this if the selected item is dynamically updated in value or text.

Events

Event name

Target

Detail

Description

opened

cv-select-surface

none

Fired when menu opens.

closed

cv-select-surface

none

Fired when menu closes.

selected

cv-list

SelectedDetail *

Fired when a selection has been made. Property index is the selected index (will be of type number).

* See cv-list's Events section for more details.

References

Accessibility

Overview

Select fields enable users to choose a single option from a list. They require clear labeling, keyboard operability, and assistive technology compatibility to guide decision-making effectively.

Keyboard interactions

  • Tab key: Focuses the select field.
  • Arrow keys: Navigate between options.
  • Enter/Spacebar: Opens the dropdown or selects an option.
  • Escape key: Closes the dropdown.

cv-select_accessibility1

Tab index focus

  • Ensure the field is in the tab order (tabindex="0").
  • Provide a visible focus indicator for dropdown states.
  • Remove disabled fields from the tab order.

cv-select_accessibility2

Accessibility — additional resources

Last Edited: April 8, 2026