Modifiers
With placeholder text
New research has shown that placeholder text strains users’ short-term memory and clutters the UI — see the user research section for more information. Don’t rely on placeholder text to deliver important information. Add help text if the select needs more explanation.
The select element does not support placeholder text in the same way as other form controls. As a workaround, add an option at the top of the list of options. The value should always be null, and the text should always be null (recommended) or “Select an option.” If the placeholder option text is null and the select is required, validation will work by default.
With help text
Add help text to further explain the select’s function or meaning. Use help text if there is too much information to fit into the select’s label.
This is an example of help text. It can wrap to two lines, but try not to go longer than three.
With error message
If a select throws an error, an error message will appear below the select.
This is an example of an error message.
With help text and error message
If a select requires help text and throws an error, an error message will appear above the help text.
This is an example of an error message.
This is an example of help text. It can wrap to two lines, but try not to go longer than three.
Filter select
Filter selects are used for filtering and pagination controls, such as sorting and results density selects. Filter selects should have a default selection. A filter select's label is horizontally aligned with the select on the medium breakpoint and above.
Do not set filter selects to required. Filter selects should not have help or error text added to it.
States
Disabled
A select can be disabled if the experience requires it. If you need to disable a select, make sure the reason is obvious. If the reason is not obvious, you can keep the select enabled and add an error message to explain.
Usage
Selects are used for choosing from a list of options that are exclusive of each other. The user can only select one option. When a user selects an option, the previously selected option is unselected. Selects save on space, but ultimately hide things from the user. Consider using other form controls before continuing with a select.
A select's options should be informational, not actions. If you need a component that allows a user to choose an action to take, use the dropdown menu.
If there is a small number of options, consider using the radio group component. Avoid long lists of options, as scrolling a list can be overwhelming and frustrating.
Do:
- Use mutually exclusive options
- Use a select if you have around five to 15 items to choose from
- Add help text when further explanation is needed
- Use filter selects for filtering and pagination controls
Don't:
- Use a select for showing actions
- Use for very short or very long lists of options
- Use a select if typing the information would be faster
- Use filter selects for anything other than filtering and pagination controls
- Set a filter select to required
- Add help or error text to a filter select
Content guidelines
Do:
- Write in sentence case
- Use parallel syntax when writing option text
- Order options logically — either by most selected or alphabetically
- Use short, concise language for option text
- Keep the placeholder option blank — write “Select an option” if placeholder text is necessary
- Always have a default selection for filter selects
Don't:
- Rely on the select’s placeholder text to explain the select’s purpose — use help text instead
- Repeat the select’s label in the placeholder text
- Include punctuation at the end of options
- Use title case or all caps
User research
Key takeaways
Familiar information
Don’t use selects for having users input information that is very familiar to them, such as a birthday. Users would most likely be able to type their birthdate faster than they would be able to select their month, date, and year from separate selects.
Likewise, don’t use selects for general information that could be typed faster than selected.
Text inputs on mobile devices
When designing forms, keep the mobile experience in mind. Ensure that the select is large enough for touch screen users to interact with, and that the selects are necessary.
Labels
Labels should be visible at all times. The only way visible labels can be removed is if the select’s function is obvious, if it is necessary, and if the select has an aria-label attached to it.
Placeholder text
Research shows that placeholder text strains users’ short-term memory and clutters the UI. However, the select element does not support placeholder text in the same way as other form controls. See the with placeholder text modifier for a workaround.
Required fields
Required selects should be marked with text saying “required” instead of using an asterisk to provide more clarity. Research has found that marking fields as “required” and “optional” lightens the user's cognitive load. Currently, we are only marking fields as required to keep input labels uncluttered and easier to scan.
Alignment
Selects should be ordered vertically, unless circumstances dictate otherwise. Vertical form fields are easier to scan and understand. Only filter selects should be ordered horizontally. See above for the correct usage for filter selects.
Study links
Primary sources (BSC user research)
No BSC sources
Secondary sources
Accessibility
This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards, usage guidelines, and content guidelines to ensure that the text input is fully accessible.
See these references for more information: