A select box allows someone to choose one option from many. It's most appropriate when there are 4 or more options to choose from, and those options can be represented in a one- or two-level list of short, text-only labels.

This example uses option groups
Also known as:
  • Select
  • Select input
  • Single select
  • Dropdown
  • Picker
  • Picklist

Anatomy

A breakdown of the different elements of a select box
Select input
The area which will be focused when this component is focused; will contain the placeholder when the field is empty and the value when an option is selected.
Label
Describes the purpose or meaning of the value to be selected.
Placeholder
Can be used to support the label; but should be used sparingly and the input should be understandable without it
Option list
The container used to display the list of available options.
Option group label
If the options have been put into groups, those groups need a short description.
Option
One of the options available to the user to select (as long as it isn't disabled!)
Value
A static representation of the selected option, after the user has finished interacting with the option list.

When to use (or not)

  When to use
  • If the user is being presented with at least 4 options
  • If the user can only select one of those options at a time
  • If the options to choose from can be represented in a single line of plain text
  • If the options to choose from have either no hierarchy, or a single level of hierarchy
  When not to use
  • If the user has 4 or fewer options to choose from, and can only choose one, use radio buttons
  • If the user has 4 or fewer options to choose from, and can choose more than one, use checkboxes
  • If the user only can only make a binary or Boolean choice (e.g. on/off, yes/no, enabled/disabled, show/hide), and their choice is intended to take effect immediately, use a toggle switch
  • If the user can select multiple options at once, and there are more than 4 to choose from, use a multi-select

Content

Put option names in a logical order

The most logical order for a given use case may not always be alphabetical. Maybe you're presenting a set of statuses that are generally expected to be in being in a certain order. Maybe there are more commonly-used options that belong at the top of the list—whatever makes sense.

Do
Don't
A list of U.S. presidents might make more sense to be put in chronological order, not alphabetical order by first name.

Ensure the select box will be wide enough for its contents

The placeholder will be displayed as a single line of text in an empty select box, and the selected value will be displayed on a single line. So make sure the select box can accommodate that, whenever possible. Pay extra close attention to this if your option values are derived from user-generated data!

Do
Don't

Keep option names short

Some browsers truncate long option names in their option lists. Even for those that don’t, shorter option names will be inherently easier for users to parse. As we mentioned in the previous section, placeholders and values need to fit on a single line as well.

Do
Don't

Accessibility

Always include a label

The label helps all users understand the purpose or meaning of the select box.

In very rare cases, it may be important to not provide a visual label. But if so, use aria-label, aria-labelledby, or hide the label visually while keeping it available to screen readers.

Whatever you do, don't use a placeholder in place of a label. Screen readers don't read them, and even sighted users may find them hard to read. They're a nice-to-have, if anything.

Do
Don't

Don't use emojis in option names

One of the built-in features of option lists in many browsers is that the user can start typing with the option list open, and use that to navigate to the next option value that matches what they've typed. Introducing emojis into your option names makes this difficult, if not impossible.

Also, aria-hidden doesn't work inside of an option list, so screen readers will be stuck reading out the emoji name(s), even if you only intend to use them for decoration.

Do
Don't