Select Menu

View Storybook

A select menu is an input control that allows users to choose one option from a list.

Classes

Class Applies to Description
d-select N/A Wraps the select element and applies base style.
d-select--xs d-select Applies extra small size.
d-select--sm d-select Applies small size.
d-select--lg d-select Applies large size.
d-select--xl d-select Applies extra large size.
d-select__input N/A Styles the select element.
d-select__input--warning d-select__input Styles select in a warning state.
d-select__input--error d-select__input Styles select in a error state.
d-select__input--success d-select__input Styles select in a success state.

Examples

Base Styles

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.

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