Select

Select is a dropdown that lets users choose a single option from a list of options.

Building a fully featured and accessible custom implementation of this component can be a substantial undertaking.

Consider using the native <select> element whenever possible.

#Functionality

  • Holds a single selected value.
  • Opens a dropdown in an overlay, interactive via mouse or keyboard.
  • Scrolls to the selected item when opened.
  • Allows searching through the options via typeahead.
  • Adjusts its position dynamically based on collisions and available space.
  • Can be non-interactive with the disabled HTML attribute on the trigger button.

#Best practices

#Consider select when you have 5 or more options

As interacting with the options require additional steps to be taken by the user, it may not be the preferred experience in the case of a couple of options.

As an alternative, radio buttons or checkboxes can make the interface cleaner and more accessible.

#Avoid select for data that is familiar to users

On the other hand, making the user scroll through a large list of options that could have easily been typed can be a poor experience.

For example, it is more natural to type out your day, month, and year of birth in separate text inputs, rather than finding the options respectively from a select.

#Provide a default selected option whenever possible

In most cases, you should be able to provide an optimal option, selected by default. This reduces the interaction cost by saving the user time and clicks.

Additionally, defaults help users by nudging them towards the best choice.

#Implementation

#Use the <button> element as the trigger

This should be your go-to choice when implementing the trigger button, as it provides expected semantics and accessibility feedback to screen readers.

For more context on buttons, read the Button play.

#Fall back to the <select> element on mobile

However well you've implemented your custom select component, it is probably not the most ergonomic experience on mobile.

iOS and Android ship with their own native widgets to be used for the <select> element on the web. In most cases, users are more familiar with their native platform, so be mindful of this and provide a fallback.

#Use a mousedown event to open the select

This can seem like an unnecessary nuance, and you might implement the opening with a click event at first.

Although, a click event won't register before a mouseup event has fired. Essentially, this means that the select would not open before the mouse is released.

Furthermore, using a mousedown event makes it possible to open the dropdown, move over an option and select it immediately with a single interaction.

#Focus trap

When opening the select, the focus should move into the dropdown, preventing other elements on the page from receiving focus.

#Close on outside click

When the select is open, clicking on the rest of the page should close the menu.

#Compound components

For a React based select, you can use the compound components pattern to express a relationship between the components in your API:

<Select>
  <Select.Option value="apple">
    Apple
  </Select.Option>
  <Select.Option value="pear">
    Pear
  </Select.Option>
  <Select.Option value="orange">
    Orange
  </Select.Option>
<Select>