Selector

Components

Selector

The selection component collects information provided by the user from a list of options. Selections are usually used in forms where a user sends data and chooses an option or several from the list in a list.

Preview

Figma

Uses

When to use

Inside a form where users select from a list of options and send data.

When not to use

We use the base selector when you only want to select one option from the dropdown options list.

We use the multiple base selector when several options can be selected from the dropdown list.

The read-only mode we use to indicate one field among others that your information cannot be edited. They should not be confused with the disable mode.

We use the fields in Disable mode when there is an action on the part of the user to activate it, however the read-only fields could not be edited.

Good practices

To reduce the cognitive load of the user, it is recommended to mark the mandatory fields with an asterisk. At the top it should be mentioned that the asterisks indicate mandatory fields.

In the texts of help in detail provide an example. Use only when required and do not abuse.

Include a concise label.

Behaviour

Types of select

Isualization of the behavior of the selector Single selection Basic type

Basic Single Selection

Isualization of the behavior of the selector Single selection type Detail

Unique selection Detail

Single Select-Button

Visualization of the behavior of the multi-selection selector basic type

Multiselect-Basic

Display of the behavior of the multi-selection selector type detail

Multiselect-Detail

Multiselect-Button

Types of label

Required

Not Required

States

Placeholder

Filled

Focus

Disabled

Error

Success

Dropdown

Only text-Basic

Only text-Button

Options-Basic

Options-Buttons

Text + icon-Basic

Text + icon-Button

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The element that serves as an input and shows the value of the combobox has role="combobox".

The drop-down has a role="listbox".

The element with role="combobox" has aria-haspopup="listbox".

When the drop-down item is not visible, the combobox role item has aria-expanded set to false. When the pop-up element is visible, aria-expanded has the value true. Note that items with combobox role have a default value for aria-expanded of false.

The select has a label provided by aria-label.

When a value is selected, the option containing that value has aria-selected set to true.