Dropdown Select
Overview
Dropdown Selects allow the user to select a value from a list of choices with a single click. Combined with searching capability or text entry in the field, dropdown selects become combo boxes. You can refer to the dedicated combo box documentation here.
Usage
When to use:
- Users need to select a single item from a list of items.
- The values of the option list are secondary information and do not need to be displayed right away.
When not to use:
- Don’t use tooltips to display crucial information. This kind of information should always be accessible without any interaction from the users.
- To propose new actions: tooltips must always be informative only, and never actionable
Anatomy
This component is almost entirely configurable, thanks to the Figma ‘Variants’ feature. To find out how you can use this flexible component, check out the following areas within the component to customise. All the sub-components can be accessed via the component’s layers list or by double-clicking in the corresponding zones highlighted with the purple boxes.
Want to learn more? Check out the Figma Variants Tutorial on YouTube, to understand how we build flexible components with Variants.
Properties
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework. In Figma, these are defined as properties that help define each variant.
Heads up
A star or asterisk symbol (*) can be used as a prefix to some Figma component properties in order to inform that the corresponding property is only used that way on the design side (Figma component libraries).
◇◇❖ Component: Dropdown select
| Property | Values | Default |
|---|---|---|
| size | small / medium / large | medium |
| state | default / hover / filled | default |
| disabled | false / true | false |
| error | false / true | false |
| *isOpen | false / true | true |
| placement | bottom / top | bottom |
Nested properties
This component is composed of other TDS elements (Dropdown Menu & Text Input) and therefore we recommend you refer to the documentation of those components to ensure that you use the component in the most appropriate way.
❖ Sub-component: Text input
❖ Sub-component: Dropdown menu
Behaviour
Note: this component is composed of other TDS elements (Dropdown Menu & Text Input) and therefore we recommend you refer to the documentation of those components to ensure that you use the component in the most appropriate way.
Sizes
Dropdown selects are available in three sizes to cater for the diverse range of use cases and devices that our business uses.
When the menu is open, each option in the menu should be the same height as the field. Use a consistent size of form components on the same page.
For example, if you are using a medium size dropdown select also use the same size text inputs, buttons, and so on.
Completed input
When the user has selected an option, the dropdown should return to the default state with the selection as replacement of the placeholder. This is the “filled” state.
When the user opens back the dropdown, the component should highlight the last selection with the hover/active state as default.
Using a combo box as a select
As referred previously in the documentation, you can use the dropdown select jointly with a text entry pattern to search or filter through the data in the dropdown menu.
This component is called a Combo box. Please refer to the dedicated documentation here.
Usage Guidelines
Choosing radio buttons over dropdowns
- Don’t: use dropdowns for 5 options or less.
- Do: use radio buttons instead.
Choosing text inputs over dropdowns
- Don’t: propose a dropdown if selecting an option takes more time than typing.
- Do: use text inputs (for example) instead.
Avoid dropdowns for binary choices (On/Off - Yes/No - …)
- Don’t: make the user select between two binary and opposed options in a list.
- Do: use a toggle switch or a checkbox instead.
Avoid dropdowns for numeric choices
- Don’t: use a dropdown if the user has to select in a list of numeric items (years, numbers, …)
- Do: prefer using a text input (see below) to let them type in, or use a stepper. (coming soon)
Help the user for long lists of choices
- Don’t: give the user a too long, scrollable list of options to choose from without helping them.
- Do: use a solution like auto-suggest or auto-complete to give them opportunity to search in your list.
