Skip to main content

Components

Select Field

allows users to choose one option from a list of items

banner-Select Field

Anatomy

Select allows a user to make a selection from a list of options in a form field. By default, it will show the placeholder or the first option in the list.

anatomy select field
  1. Container : Selection control (input) that can be selected or unselected, and pushed into different states
  2. Icon Left : Optionally icon for represent context of selection
  3. Menu Container : Dropdown or popover to show list of item option when user click the select field
  4. Input Container : Placeholder text like “Select an option” is typically displayed in the Select field. After the user makes a selection, the placeholder text is replaced with the user’s selection and for multiple selection the placeholder text is replaced with chips
  5. Icon Right : Caret icon positioned to the right of the container visually distinguishes this as a Select input.
  6. Menu Item : A list of options in the menu container that the user can select by clicking on the item

Usage

Selects work well to present many different options in a compact unit. This way users don’t have to scroll through tens of options to find what they’re looking for. When you have only a few options so users aren’t overwhelmed by them, it can help to present them all at once. Don’t confuse a select box with a dropdown menu. Select boxes are for setting options and work best in forms. Dropdowns are for presenting actions and most appropriate in a header.

Single select : lists allow users to select a single, mutually exclusive option. When the user selects an option from the list, the selection appears in the toggle.

Multiple select : lists allow users to select one or more options from a list, with the selected options marked with a blue check. It differs from the checkbox select in that each option selected by the user appears in the top display area as chips. Once the number of selections reaches a certain number, the regular chips will be replaced by a gray chip indicating how many more items were selected. The default number of selections is 3, but you may change this number based on your use case.

Common places buttons appear : Forms, filter, etc

When to use

  • Use Select as a form element where users are only allowed to select one item from a list of more than 7 predefined options.
  • Typically, Selects work best when the list is between 7 to 15 items to prevent overwhelming the user with too many options.

When not to use

  • For a list between 2 to 7 predefined options, consider using Radio to select one option or Checkboxes to select multiple options. Radio and Checkbox groups display all options upfront and do not require the user to interact with the input to view the list of options.

Accessibility

Keep menu items short and concise. Long menu items that cause text to wrap to multiple lines are discouraged. If text wrapping becomes a frequent concern, consider revising the text or use alternative UI patterns that will give your content more space, When possible, the field button width should be wide enough so that any chosen menu items can be displayed in full and for a single form, mark only the required fields or only the optional fields, depending on whichever is less frequent in the entire form. If most of the pickers are optional, only the required fields should be given an asterisk or have labels appended with “(required)”. If most of the pickers are required, only the optional fields should be appended with “(optional)”. An asterisk should never be used to note that a picker is optional.

Alt text

Do

Sort menu item with appropriate width

Alt text

Don't

Long menu item with limited width

Content

When creating select :

  • Keep option items short and concise. Long menu items that cause text to wrap to multiple lines are discouraged.
  • When possible, the field button width should be wide enough so that any chosen menu items can be displayed in full.
  • Field labels, placeholder text, and menu items should be in sentence case.
  • Used description in the help text is can communicate what to select or how to select an option.