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

Inventory App with select fields

Structure

The select field is a 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 field with no placeholder

Bad example

Select field with placeholder

Behavior

When users click on a select field, a dropdown window appears with a set of options. The selected option is displayed in the select 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

Related pages

A checkbox allows users to select multiple options from a set.
A radio button allows users to select one option from a set.
A text field allows users to enter, read and edit text.
A timepicker allows users to pick a time from a popup.