Select

A Select field allows users to choose one or more options from a pre-defined list of related items.

Interactive Playground

The Interactive Playground allows you to experiment with various button styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

  • Apple
  • Gravel

    Not a Fruit

  • Broccoli

    Vegetable

  • Banana
  • Pear
  • Blueberries
  • Grapes
  • Oranges
Please select one
HTML
React
CodeSandbox
Storybook
<div
  data-testid="NeoInputWrapper-root"
  class="neo-form-control"
>
  <div
    data-testid="NeoInputWrapper-group-root"
    class="neo-input-group"
  >
    <label
      id=":R0:-label"
      for=":R0:-toggle-button"
    >
      Select a favorite food
    </label>
    <div
      aria-describedby="helper-text-:R0:"
      class="neo-multiselect"
    >
      <span class="neo-multiselect-combo__header neo-multiselect-combo__header--no-after">
        <button
          aria-controls=":R0:-menu"
          aria-expanded="false"
          aria-haspopup="listbox"
          id=":R0:-toggle-button"
          tabindex="0"
          aria-label=" selected"
          class="neo-multiselect__header"
          type="button"
        >
        </button>
      </span>
      <div
        class="neo-multiselect__content"
        id=":R0:-menu"
        role="listbox"
        aria-labelledby=":R0:-label"
      >
        <ul role="group">
          <li
            class="neo-option-plain"
            role="option"
            aria-selected="false"
            id=":R0:-item-0"
          >
            Apple
          </li>
          <li
            class="neo-option-plain"
            disabled
            role="option"
            aria-selected="false"
            id=":R0:-item-1"
          >
            Gravel
            <p class="neo-input-hint">
              Not a Fruit
            </p>
          </li>
          <li
            class="neo-option-plain"
            role="option"
            aria-selected="false"
            id=":R0:-item-2"
          >
            Broccoli
            <p class="neo-input-hint">
              Vegetable
            </p>
          </li>
          <li
            class="neo-option-plain"
            role="option"
            aria-selected="false"
            id=":R0:-item-3"
          >
            Banana
          </li>
          <li
            class="neo-option-plain"
            role="option"
            aria-selected="false"
            id=":R0:-item-4"
          >
            Pear
          </li>
          <li
            class="neo-option-plain"
            role="option"
            aria-selected="false"
            id=":R0:-item-5"
          >
            Blueberries
          </li>
          <li
            class="neo-option-plain"
            role="option"
            aria-selected="false"
            id=":R0:-item-6"
          >
            Grapes
          </li>
          <li
            class="neo-option-plain"
            role="option"
            aria-selected="false"
            id=":R0:-item-7"
          >
            Oranges
          </li>
        </ul>
      </div>
    </div>
    <div
      class="neo-input-hint"
      id="helper-text-:R0:"
    >
      Please select one
    </div>
  </div>
</div>
<Select
  aria-label=""
  errorList={[]}
  helperText="Please select one"
  label="Select a favorite food"
  size="md"
>
  <SelectOption value="apple">
    Apple
  </SelectOption>
  <SelectOption
    disabled
    helperText="Not a Fruit"
    value="gravel"
  >
    Gravel
  </SelectOption>
  <SelectOption
    helperText="Vegetable"
    value="broccoli"
  >
    Broccoli
  </SelectOption>
  <SelectOption value="banana">
    Banana
  </SelectOption>
  <SelectOption value="pear">
    Pear
  </SelectOption>
  <SelectOption value="blueberries">
    Blueberries
  </SelectOption>
  <SelectOption value="grapes">
    Grapes
  </SelectOption>
  <SelectOption value="oranges">
    Oranges
  </SelectOption>
</Select>

Anatomy

The select component provides a list of options from which the user can select one or more items. The dropdown contains a list of pre-defined items that control some aspect of the application.

Select
Image showing a select component with its four notes pointed out and described below
Select with Dropdown
Image showing an expanded select component with its expanded section noted as the fifth note and described below

  • Label:

    A label should be included above the select field to describe its function to the user.

  • Form:

    This field displays the currently selected function (if any) for this component. This is chosen from the dropdown list. The user can start typing a response and matching items from the list will be displayed below.

  • Helper Text:

    This optional field provides additional information on the purpose of this field.

  • Chevron:

    The presence of the chevron icon shows that there is a menu of items that can be accessed by selecting the field.

  • Expand Trigger:

    Each of the selectable options are shown here. The user will choose one or more of the items to make active.

States

Select can have different states depending on user actions and the design of the application or website.

Enabled
Image showing the default state of a select
Active
Image showing the active state of a select
Hover
Image showing the hover state of a select
Disabled
Image showing the disabled state of a select
Error
Image showing the error state of a select

  • Enabled:

    This state is used when no other state is active. It is the rest state of the select component.

  • Active:

    The user can click the field to open the dropdown list to select items. The user can also start typing and matching items will appear.

  • Hover:

    Moving the mouse over the field changes it to the Hover state. There is no hover state when using keyboard navigation.

  • Disabled:

    If the field cannot be selected or modified, use the Disabled state. Another action or setting must be made to enable the field.

  • Error:

    When the value entered into the field is incorrect, or if it is a required field but it has been left blank, an error message is displayed.

Type

Select can be implemented in different ways depending upon how many items can be chosen from the list, and how the results are displayed.

Single Select

When the user can only pick one item from the list, use the Single Select type. The item chosen appears in the form field and the dropdown menu closes. The user can return to the selector at any time to make a different choice.

Image showing an expanded select menu
Image showing a closed select menu with a label and a preselected element

DO: Use select when choosing from a large list of items, or when space is limited.

Image showing a closed select menu with a preselected element that is 'yes'

DON'T: Do not use select when there is room to use radio buttons instead.

Multiple Select

When the user can choose more than one item from the list, use the Multiple Select type. A checkbox in front of each menu item allows the user to pick one or more items. The menu closes when the user moves to another field, or clicks outside of the menu.

Image showing an expanded select menu with checkboxes on the left side of each option
Image showing an open select menu with checkboxes on the left side of each option

DO: Use the multiple select component when there is a long list of options and more than one can be selected, .

Image showing an open select menu with checkboxes on the left side of each option

DON'T: Do not use multiple select for small lists of items. Use a checkbox instead.

Combobox

The combobox displays multiple selections in a different way. Each item chosen from the list appears as a chip inside the form field. Clicking the X, or deselecting the item checkbox, removes that item from the list of selections. The user can select items from the list, or they can start typing and matching items.

Image showing an expanded select menu with checkboxes on the left side of each option
Image showing an open select menu whose main area is a text input field and has the letter 'T' typed in it, the shown options are filtered to only show options that start with the letter 'T'

DO: Use the combobox to enable users to filter long lists easily.

Image showing an open select menu whose main area is a text input field, and has nothing typed into it, and has only three options shown

DON'T: Do not use a combobox for short lists.

Behavior

Select has different behaviors that determine how it interacts with the user and the rest of the website or application. The following examples show several implementations of the select component.

Labeling

Labels help the user identify the information contained in or required by each select field.

Image showing a select with a short and descriptive label above it.

DO: Always include labels unless there is limited space.

Image showing a disabled select with placeholder text instead of a label.

DON'T: Do not rely on placeholder text as it disappears once content is added.

Required vs Optional

A select component can be set as either Required or Optional. Required fields, denoted by a red asterisk next to the label, must contain some data before the user can leave this screen. Optional fields do not have an asterisk and can be left blank.

Image showing a form with multiple select, most of which are shown to be required via use of the asterisk, and one shown as optional via the absense of an asterisk.

Errors

When the data entered into a select field is incorrect, or if the field is required but has been left empty, an error state is displayed. The field is highlighted and helper text changes to provide information on what the problem is and how to fix it.

Image showing a select in an error state, which is described red helper text below the select.

Loading Indicator

Whenever a select component needs time to collect data or transmit a selection, the field contains a Loading Indicator which includes a spinner. The selected data or the menu list appears once loading is finished.

Image showing a select in an loading state, which is expressed by there being a spinner in the select

Chips

When multiple selections are allowed, and a combobox is being used, the selected items appear as chips within the field. Clicking the X within a chip, or deselecting the checkbox in the list will deselect that item.

Image showing a multi select with several options chosen, all of them being indicated selection by a checkmark in the expanded view, and chips in the collapsed view

Where space allows, a combobox can be set to display the chips wrapped in multiple rows. If space is limited, chips can appear on a single row with a chip specifying how many additional hidden items are selected. Clicking the number opens the dropdown menu to display all of the selected items.

Image showing a multi select with several options chosen, and the collapsed view showing some of the chips and a single chip with a number indicating the number of additional options chosen, which are shown in a tooltip on hover

Specs

There are 2 sizes of the select component. Choose the one that is the best fit for the amount of space available to display it. The 2 sizes differ in the total height of the field.

Medium
Image showing spacing around the radio button, 16px on the left and top, and 8px between the radio button and the label
Small
Image showing the vertical margin between the radio buttons in a vertically aligned group, 8px

Keyboard Interactions

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.

Keystrokes Interaction
Spacebar or ↑ Up Arrow and ↓ Down Arrow Opens the selected option in the dropdown menu.
Enter or Spacebar Select the current option and close the list.
↑ Up Arrow and ↓ Down Arrow Moves to the previous or next option.
Esc Closes the dropdown menu without changing the selection.
Spacebare (for multiple select) Move to the previous or next option.

Related Content

Components