Skip to main content

Select

A component that allows users to choose one or more options from a list, typically presented as a dropdown or pop-up menu. Select components are commonly used in forms and settings.

Key Features​

  • Clear input button

    A Visually recognizable clear input button, featuring an X icon, is placed within the text input field, allowing users to clear the entered text effortlessly.

  • Select validation states

    Features multiple visual states to provide users with instant feedback on their input status and any necessary corrections.

Variants​

The Select consists of three parts: Label, Field, and Helper Text. The Label informs users what to choose, the Field is where they make their selection, and the Helper Text provides additional guidance.

You can choose to show or hide the Label and Helper Text to fit your design. This flexibility helps create an easy-to-use Select component.

Label Component

Helper text Component

select anatomy
    1. Label
    2. Field
    3. Helper Text
Before Components

Choose from three options - None, Icon, or Avatar - to customize the content preceding the component, enriching the visual presentation and context.

States

Give visual feedback and make the user more aware of how to interact with the interface. That is why Select have several different states, depending on their state of use.

Filled States

Represent a completed or active element, offering clear visual feedback that signifies user interaction or selection within the interface.

Clear Button

A Visually recognizable clear input button, featuring an "X" icon, is placed within the select field, allowing users to clear the entered text effortlessly.

PropertyValuesDefault value
Filled
Yes / No
No
Clear Button
Yes / No
No
Before Component
None, Icon. Avatar
None
State
Normal, Hover, Focus, Alert, Alert Focus, Disabled
Normal

Anatomy​

Select anatomy
  1. None
    1. Label
    2. Arrow
    3. Container
  2. Icon
    1. Before Icon
    2. Label
    3. Arrow
    4. Container
  3. Avatar
    1. Avatar
    2. Label
    3. Arrow
    4. Container
Select anatomy
    1. Select
    2. Dropdown

Behaviors​

Dropdown

When the Select is opened it integrates with the Dropdown, providing a smooth and intuitive user experience for selecting options.

Validation error

In the event of an error, the component transforms into an error state, displaying a Helper Text with Before Icon and Error Intent, guiding users towards resolution.

Best Practices​

Don’t overcrowd

Having too many options in a select component can overwhelm users and make finding the option they need challenging. Try to limit the number of options. However, if you have three or fewer responses, using the radio button component may be a better solution.
Do
Don't

Default option

Provide default or pre-selected options. If there is a default or commonly used option, consider pre-selecting it to save users time and effort. When it is impossible to set a default option, use 'Select' as a placeholder. 
Do
Don't

Content Guidelines​

Clear and concise labels

The labels for the Select options should be clear and easy to understand. Users should be able to identify what each option represents quickly. Keep the label text concise so there is no need to wrap the text.
Do
Don't

Consistency

Use sentence case in all elements of the Select Component. Do not use articles (a, an, the) or punctuation for Labels and Options.
Do
Don't

“None” option

Remember to include the answer “None” if you want to allow the user not to make a choice. Don't leave the blank value to indicate a lack of choice.

Helper text

Refrain from repeating in Helper text the same information as in Label. Instead, use it to hint at what option to choose, provide context as to why you need the answer, or give a general description of the choice options. Only use Helper text if it adds real value to the user.