Dropdowns
Usage
Definition
Dropdowns (aka select menus) allow a user to select one item from a list of five to twelve options.
For lists of less than five options, consider radio buttons instead. For lists with more than twelve options, consider using a text input with auto-complete instead.
Full-screen width drop-downs are only allowed on the XS grid (0-479). In all other cases, dropdowns should span to a specified number of Cols in the layout.
Common Characteristics
Dropdowns are normally 40px high, but a small 32px alternative may be used. Whichever size is used, use the same size for any associated elements like text inputs and buttons.
All dropdowns have these states: disabled, active, and focused.
Usage Guidelines
Dropdowns are useful for presenting lists of options without cluttering up the UI. However, they are inefficient because they hide data and add clicks to the experience. They are also prone to usability problems, especially with very long lists, or on small screens. Therefore, use dropdowns cautiously—as a last resort—when other controls don't meet the need.
Do
- Avoid dropdowns when possible, especially for short, or very long lists.
- Consider dropdowns for lists of 5-12 items.
- Consider dropdowns when users aren't familiar with the acceptable input options.
- Support keyboard navigation within dropdowns for accessibility (tab, arrows, enter, characters).
- Gray out unavailable options rather than hiding them.
- Include placeholder text (e.g. “Select one…”), or pre-select an option when it is likely to assist a user.
- Remember the last selection when it is likely to assist the user.
Don’t
- Use dropdowns for less than 5 options. Instead, use radio buttons or button groups.
- Use dropdowns for more than 12 options. Instead, use a text input with auto-complete (e.g. for Makes, Models, Sellers, Auctions, States/Provinces).
- Use dropdowns for entries that are highly familiar to users. Instead, use a text input (e.g. birth years, Mr/Mrs/Ms).
- Use dropdowns for State/Province. Instead, use a ZIP code text field and auto-populate the city and state in a single editable text field.
Disable options that are temporarily unavailable rather than hiding them.
Label Options
Labels are normally top-left of the dropdown. However, when vertical space is at a premium, right-aligned Labels are acceptable.
Right-aligned Labels save vertical space in the UI.
Validation
When a dropdown is required, validate that a selection has been made when the form is submitted and show an error if required.
Design
Size
Dropdowns are normally 40px high, but a small 32px alternative may be used when vertical space is at a premium. Whichever size is used, use the same size for any associated elements like text inputs and buttons.
Full-width dropdowns are only allowed on the XS grid (0-479). In all other cases, inputs must span to a specified number of columns in the layout.
States
All dropdowns have these states: default, disabled, and focused.
Default
Disabled
Focused
Feedback Indicators
Error/Invalid
Code
Default
With readonly state
The Dropdown component expects either the <DrOption> or <DrOptionGroup> component as children.
With default selection
_If the placeholder prop is omitted, the defaultSelection is displayed as a string instead. This will set the DrOption with a matching name property as selected. For the defaultSelection, the data and behavior is based on value.
With onChange callback
If the placeholder prop is omitted, the default selection is displayed instead.
Dropdown Props
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | null | Sets a unique id on the dropdown |
| defaultSelection | array | null | Sets the default DrOption array item selected |
| children | node | DrOption or DrOptionGroup | Sets whether the dropdown items are DrOption or DrOptionGroup |
| placeholder | string | null | Sets the default Placeholder for the dropdown |
| disabled | bool | false | Sets whether the dropdown is disabled |
| multiple | bool | false | Enables multiselect |
| size | string | lg | Sets either a small "sm" or large 'lg' dropdown size |
| valid | bool | false | Sets a dropdown optioned as valid |
| readonly | bool | false | Sets the dropdown to readonly state |
DrOption Props
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | null | Sets a unique id on the dropdown option |
| name | string | null | Sets a unique name on the dropdown option |
| value | string | null | Sets the value of the drowndown option when selected |
| disabled | bool | false | Disables the dropdown option and applies disabled styles |