Skip to main content Skip to navigation Skip to search

A select box is a form element that surfaces a drop down list with a set of choices and displays the users selection when complete.


Use a select box for a list of items that a user does not need to see all the time.

A common strategy is to combine an input field with a select box so that a user can enter a value and qualify it with a menu item. For example, the user might enter a number in an input field and select the units from the select box.

Select presents a list of options that the user can choose from and apply to an input field.
Dropdown presents a list of options that take an immediate action or navigate the user outside of the current context.



Use when interactive and ready for input.


Use when selected by a user with an input method, such as mouse or keyboard.


Use when not interactive. For example, when a user does not have permissions to edit the input.

Out of stock. Select another color.


Use to communicate a user or system error. This validation can happen when the user moves away from the input or after attempting to submit a form. For example, invalid input or username already taken.

Changes saved


Use to provide real-time feedback immediately after a user’s input. For example, username available.


Select elements are available in vertical, horizontal, compact, and multiple layout. Select elements with the multiple attribute enables the user to select and view several items at once. See more layout guidelines on the form page.


message text


message text


message text


message text