🚧 This website is work in progress 👷
Components
Forms
Published
Select

Select allows users to choose one option from a list of values.

The select component collects user-provided information from a list of options. Selects are usually used in forms where a user submits data and chooses one option from a list.

Usage

Use a dropdown list when there are multiple choices that can be collapsed under one title, if the list of items is too long, or when space is constrained. Use a dropdown list when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible, putting equal emphasis on all options).

When to use

  • The dropdown list label should describe what can be found in the menu.
  • Use shortened statements or single words as list options.
  • If there isn't a default option, use Select an option as placeholder text.
  • If None is an option, include it.
  • Write the choices using parallel construction. For example, start with the same part of speech or verb tense.

When not to use

  • Avoid using Select for less then 3 entries. Try using a radio button instead.
Edit this page

References