Dropdown selector
Overview
Definition
A way for someone to choose a single option from a list.
Similar or related Components
Guidelines
These are most commonly used in forms when visual space is at a premium or there are a lot of options to choose from. If there are more than six options in a Radio selection, use the Dropdown selector.
As of right now, we only allow for a single choice to be selected from the list.
If you have many options, say 25 or more, Search may be better.
Content
- Don’t use this when there are just two options—use radio or checkbox where appropriate.
- Keep the selection options concise when possible. Try not to let the main information go onto two lines.
Visuals
Do
You can change the size of the title, make sure it matches the rest of the page.
Do
Can be stacked vertically or horizontally.
Don’t
Don’t change the colors of the input field.
Don’t
Don’t change the icon.
Caution
If you have many options, say 25 or more, Search may be better. Search is only better if people know what they are searching for, if they don’t, use the Dropdown.
Specs
The selection field
| Default | Hover | Active | Error | Disabled | |
|---|---|---|---|---|---|
| Title text size | body-large-300 | ||||
| Title text color | $ink-600 | ||||
| Background color | – | – | – | – | $ink-100 |
| Border radius | border-radius-small | ||||
| Border color | $ink-300 | $blue-800 | $ink-800 | $red-600 | $ink-300 |
| Padding | Spacing-04 spacing-03 spacing-03 spacing-03 | ||||
| Icon size | 24 px / 1.25 rem | ||||
| Icon color | $ink-600 | ||||
| Icon padding-left | spacing-02 | ||||
| Input text size | body-medium-500 | ||||
| Input text padding-right | spacing-04 | ||||
The dropdown group specs
| Default | Hover | Active | Disabled | |
|---|---|---|---|---|
| Border radius | border-radius-small | |||
| Padding | spacing-02 | |||
| Drop shadow | shadow-200 | |||
Dropdown item selection
| Default | Hover | Active | Disabled | |
|---|---|---|---|---|
| Text size | body-medium-500 | |||
| Text color | $ink-800 | $ink-300 | ||
| Border radius | border-radius-small | |||
| Background color | – | $blue-200 | $blue-300 | $ink-100 |
| Padding | Spacing-02 spacing-03 | |||
Accessibility
- The button should be controllable with keyboard and other assistive technology.
- The information within the hidden view should have the correct contrast.