Select

Selects are used in forms for large lists of options, and when the user can only select one option within the list. If the list is small, consider using a radio group, depending on space and the purpose of the select. Selects are also used as filters for large data sets.

Selects should always have a label for accessibility purposes, as well as placeholder text. Ideally the placeholder text should reflect the action the user should take and what type of options live in that select, e.g.: Select a list, Select a category, or Select an option (if the item type cannot be described in one word).

Variations

Standard select

Use a select when a user can select one option.

Standard select with search

A searchable select allows the user to filter the list of options. Use this when the user has to select from a very long list of options.

Standard select with disabled options

Use this variation when a user cannot select or deselect a certain option or options.

Disabled select

This variation does not allow the user to change the value of the select. The select’s value will not be submitted when in a form.

Readonly select

This variation does not allow the user to change the value of the select. The select’s value will be submitted when in a form.

Select with custom options

This variation shows custom options. This variation should be used if additional content is needed in each option. An example of this would be a status filter where the status icon is shown with the option text. Custom options can be used with custom placeholder.