Guidelines
Guidelines
Usage
A Select should:
- Have two or more options.
- List options in a rational order that makes logical sense.
- Have comprehensive and distinct options.
- Have only one option selected at a time.
- Have 'multi' enabled when one or more options can be selected at a time.
- Have an option selected by default only when it can be expected to be the preferred option. A list of countries for example can have the "All countries" option preselected by default.
- Have 'clearable' enabled when the value is wanted to be able to be reset back to its initial value.
Select vs. Radio Group
The Select and Radio Group can only have one option selected at a time.
A Select should:
- Be used for lists with two or more options.
A Radio Group should:
- Be used for option lists with 6 or fewer options.
Multi-Select vs. Checkbox Group
The Multi-Select and Checkbox Group can have zero, one or more options selected at a time.
A Multi-Select should:
- Be used for lists with two or more options.
A Checkbox Group should:
- Be used for option lists with 6 or fewer options.
Options
The options should:
- Be clear and concise; avoid full sentences and punctuation.
- Refrain from using the same word at the beginning of a set of options.
- Be arranged in a logical order avoiding bias towards a specific option, for example in the most common or numeric order. It should be noted that alphabetically ordered options change order when content is localized to other languages.
- Be arranged into logical option groups when the list is very long.
- Have the "None of the above" or "I don't know" option last.
☝️ Option list resizing in Figma
When fewer than 8 options, or no option group label, are wanted to be displayed the layers can be switched off in the layer panel. To regain the correct height for the options list the "cosmos-optgroup" layer should be set to "Hug".
Searchable
The options should:
- Be searchable only when there are more than 8 options. Opting for a search with fewer options may complicate the interface, while more options benefit from option filtering.
- Use a custom Placeholder text within the search input when it can help guide users in understanding the scope of the search, such as "Search for Countries"
- Display a short, precise, yet positive Empty State message informing the user that no matching option was found
Selected Option(s)
The selected option(s) should:
- Be displayed as text.
- Be truncated using an ellipsis when exceeding the width of the container.
- Never be split into multiple lines.
- Be listed with commas as separators if 'multi' is enabled.
States
The states of the Select change when the user engages with it and/or when an outside condition affects it.
An Select should:
- Use disabled when the Select is temporarily inaccessible, but when it has the prospect to be enabled in a different setting.
- Only automatically focus the Select on page load when a user expects it. With autofocus assigned, a screen reader immediately directs users to the form control without warning them.
Label
A Select's label communicates what should be selected.
A label should:
- Indicate a distinct input.
- Be short.
- Use sentence-case for optimal readability.
- Never include interactive elements like a link or button as they are considered inaccessible by assistive technologies.
Prefix
A Select can set a prefix when its meaning should be visually emphasized, e.g. through commonly used elements such as flags or thumbnails.
A prefix should:
- Always be used in combination with a label.
- Use a maximum size of 24 x 24 pixels.
- Use only one single non-interactive element.
- Be uniform in size and ratio.
- Use the same color as the label when it is an Icon.
- Never be embedded through an iframe.
🎨 How to implement a prefix in Figma
Find a tutorial on changing prefixes in Figma, including an explanation of prefix definition and the specific sizes used in our components here.
Help text
A Select's help-text provides extra guidance or instructions to the user. It can also clarify how the information will be used.
A help-text should:
- Be used when extra guidance or instructions are beneficial.
- Be brief and descriptive as some assistive technologies read it.
- Be supplementary to Select’s label, not repeating it.
- Use sentence-case for optimal readability.
Placeholder
A Select's placeholder is an example of the input the user should enter.
A placeholder should:
- Indicate that nothing is selected.
- Provide an example of what the user should pick.
- Be supplementary to the label and help-text without repeating them.
- Be used in conjunction with a label.
- Be considered temporary and should not be relied on when it comes to instructing what information the user is required to enter. Label and help-text should be used to instruct on the type of information that is to be entered.
- Be used only when it is needed to provide an example of the type of information that should be selected.
Form validation
A Select should:
- Be set to required if entering information is required to submit a form.
- Be marked as “Required” when most of the fields in the same form are optional.
- Be marked as "Optional" when most of the fields in the same form are required.
- Update its validation state when the form is submitted. And after submitting as soon as the user interacts with the component.
- Have a validation message that is supplementary to the label and help-text without repeating them.
- Instruct how to avoid possible errors with a validation message.
- Have the validation message be as short and clear as possible.
- Be considered to have a default value added to help the user avoid an error, for example when a list of all countries is wanted to be shown before the user can filter them further.
Accessibility
A Select should:
- Set a contrasting appearance based on the environment it's used in. Use 'light' appearance in dark environments and vice versa.