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.
Usage
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.
vs
Dropdown presents a list of options that take an immediate action or navigate the user outside of the current context.
States
Enabled
Use when interactive and ready for input.
Active
Use when selected by a user with an input method, such as mouse or keyboard.
Disabled
Use when not interactive. For example, when a user does not have permissions to edit the input.
Out of stock. Select another color.
Error
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
Success
Use to provide real-time feedback immediately after a user’s input. For example, username available.
Layouts
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.
