Skip to content
search icon
clear
Component Status

The Select component allows users to choose one or multiple items or options from a list.

Guidelines

A select can be used in different settings:

  • to filter or sort content on a page
  • to submit data

Singleselect versus multiselect variant

The singleselect variant is used to choose only one option from a list. The multiselect variant is used if multiple choices can be applied.

A native select component is also available for implementation. We recommend using native select on product with limited space as it provide a better user experience.

Best practices

Use clear and simple language in the placeholder text. It will help the user to understand what they are expected to choose from.

Order your list of options in a way that will make the most sense to the user:

  • alphabetically
  • numerically
  • by most commonly selected option

Display a maximum of six items/options at a time.

Implementation

A native select component is also available for implementation. We recommend using native select on products with limited space as it provides a better user experience.

Variant

FigmaExternal link
🙈Ops! Can't find the image, but you could still try Figma.

Demo

SingleSelect

        MultiSelect

              NativeSelect

              Edit this page on GitHub