Select component

A select field allows users to select one option from a list of more than 10 items

Structure

The select field is a type of text field with a down arrow icon on the right.

Generally, it has a label which indicates the type of input associated with the field.

Be aware: Placeholders should be avoided.

Good example

Select good

Select field with no placeholder

Bad example

Select bad

Select field with placeholder

For a required select, a red asterisk should be added next to the label.

For a read-only select, a lock icon should be added next to the label.

Behavior

When users click on a select field, a dropdown window appears with a set of options.

When users click on an option, the dropdown should disappear and the selection should be visible in the field.

Style

Color

Since the select field is a clickable element, it has multiple states. Each state is associated with a different color, providing visual feedback to users.

Default select field
Valid select field
Warning select field
Error select field
Disabled select field