Select
Select allows users to make a single selection or multiple selections from a list of options.
Relies on the third-party librarySelect2for its features and functionality.View all resources
Stacked layout
Section titled “Stacked layout”Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts.
Help or instructional text goes here
Help or instructional text goes here
Help or instructional text goes here
Error message
Help or instructional text goes here
Warning message
Horizontal layout
Section titled “Horizontal layout”Side labels are most useful when vertical space is limited.
In Practice
Section titled “ In Practice”The select component should:
- Be used for selecting between 4 or more pre-defined options.
- Have a default option selected whenever possible.
- Use “Select” as a placeholder option only if there’s no logical default option.
Content guidelines
Section titled “ Content guidelines”Select label
Section titled “Select label”Labels should:
- Give a short description (1–3 words) of the requested input.
- Be written in sentence case (the first word capitalized, the rest lowercase).
- Avoid punctuation and articles (“the”, “an”, “a”).
- Be independent sentences. To support internationalization, they should not act as the first part of a sentence that is finished by the component’s options. (e.g., use “Country” NOT “My country is:”)
- Be descriptive, not instructional. If the selection needs more explanation, use help text below the field.
Select options
Section titled “Select options”Options should:
- Start with “Select” as a placeholder if there isn’t a default option
- Be listed alphabetically or in another logical order so customers can easily find the option they need
- Be written in sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at the end of each option
- Be clearly labelled based on what the option will do