Pickers allow users to select content from a set of values, usually presented in a list or dropdown menu.
Last updated
Was this helpful?
This article is quite lengthy. To quickly find the information you're looking for, consider using the search.
Overview
Different types of pickers can be used in forms. Choosing the right picker depends on the type of answers requested and their number.
Here is an overview to assist you in choosing the appropriate picker based on your use case. For more in-depth information, please refer to the details of each picker.
Item Selection
Select is the simplest picker.
Allows users to choose one item from a option list.
To use for 'simple' option lists that do not require back-end calls to retrieve options (eg. list of countries, language...)
Search bar is automatically shown for item lists with 20+ items
Group options into bundles with title separators to make it easier to read and understand.
Custom the field with optional props : Label, Requirement Indicator (Red Asterix), Tooltip, Placeholder Value and Helptext
Async Select is a variation of Select component.
Allows users to choose one item from a option list.
This variant is specifically made for complex list of options that requires a back-end call (eg. list of brands, available options...)
Async Select loads options only when opened, which can result in a potential loading state before displaying the options. The component also supports partial loading for improved performance.
Group options into bundles with title separators to make it easier to read and understand.
Custom the field with optional props : Label, Requirement Indicator (Red Asterix), Tooltip, Placeholder Value and Helptext
Multi Select is a picker that offers more flexibility to the user.
Allows users to choose multiple items from a list without limitations.
To use for 'simple' option lists that do not require back-end calls to retrieve options (eg. list of countries, language...)
When empty, Multi Select shows a '+' icon on the far right corner (unlike Single Select, which uses a dropdown arrow).
The Selection List opens in an overlay, showing checkboxes and a blue background for selected items. Chosen items are represented by chips in the field.
Selection List stays open until users click on CTA "Done". But if users click outside, the selection is still saved.
Users can unselect a value by clicking on the "x" ("remove") icon of its chips or by unchecking the line in the Selection List. They can also clear the whole selection with the Secondary Button in the dropdown "Clear".
Once the selection is made and the overlay is closed, the picker will only show the first 8 values (overridable setting) with chips. A " Show More / Show Less " action appears in the input to let users manage the overview.
When disabled with value, the picker shows all the selected values and cannot be collapsed.
Async Multi Select is a variation of Multi Select.
Allows users to choose multiple items from a list without limitations.
This variant is specifically made for complex list of options that requires a back-end call (eg. list of brands, available options...)
Async Multi Select loads options only when opened, which can result in a potential loading state before displaying the options. The component also supports partial loading for improved performance.
Date/Time Selection
Time Picker is a component dedicated to time (hours & minutes).
With this picker, users can select one item in the calendar.
When empty, Time Picker shows a 'time' icon on the far right corner (unlike Single Select, which uses a dropdown arrow).
Selection List items of Time Picker are customizable :
'interval' (from 1 to 60): allows populating options with precise interval
Removing time before the current time
Date Picker is a component dedicated to dates (day).
With this picker, users can select one day in the calendar.
When empty, Date Picker shows a 'calendar' icon on the far right corner (unlike Single Select, which uses a dropdown arrow).
When the user clicks the field, a calendar overlay appears with different actions and information (see below). The overlay is dismissed once one chooses a date. The chosen date populates the field. Users can always change the selected date or erase their selection by clicking on the "x" ("delete") icon.
Timezone information appears automatically and only if the users' locale is different from the platform timezone.
A mobile version of the calendar is automatically displayed on small screens.
Daterange Picker is a variation Date Picker component.
With this picker, users are invited to select a period, not only a single date.
It has the same behaviors as Date Picker.
The Daterange Picker differs from the Date Picker component in two ways:
The calendar overlay exhibits two consecutive months, as opposed to just one in the Date Picker.
The placeholder content is "Select a period"
You have the option to enforce a specific time range.
eg. If a 4-day minimum range is enforced, users cannot select an end date earlier than 4 days from the chosen start date.
This component is made for users to select a range with two different values (a start date and an end date). While it's still possible to select the same value for both (ending with users selecting a range of a unique day), this behavior should not be encouraged.
DateTimerange Picker is the most complete version of pickers dedicated to dates and times.
It allows users to select a date range and to associate a precise time of the day.
Time selection is optional.
Unlike other pickers and because of its complexity, DateTimerange Picker overlay opens in a modal when the user clicks on the field.
Inline advanced picker
The inline advanced picker triggers the advanced picker modal which is a key component to advanced selection. Once the items are selected, it displays a counter with "selected" as microcopy; you may override it.
Layout
For a clear form layout, follow these simple design rules:
Place inputs in a vertical sequence, each stretching across the full panel width for a clean look.
If you're aligning inputs side-by-side, leave a 16px gap between them to prevent clutter.
Similarly, when stacking inputs vertically under a single label, keep a 16px space for clear separation.
When a clear and logical default choice is evident, pre-select it, while also allowing users the option to override it.
For example, in language selection, 'English' is initially chosen but can be modified by the user.
In such instances, we recommend informing the user this default choice was made on their behalf by explicitly marking it as the 'default' selection.
In this scenario, the component will always have a value, eliminating the possibility of it being null, and consequently, the picker will never be in an error state. This approach obviates the need to designate the picker as 'mandatory' to avoid rendering an ineffectual verification step.
When no option presents a clear logical choice, employ a 'blank option,' such as '- - Select - -', to guide users in making their decision.
It's important to note that the 'blank option' is not a valid response for required fields and will result in an error if users attempt to save the form with this selection.
In this scenario, the component can be clearly stated as mandatory.
Help text
Prefer a help text over a tooltip to add extra details, and explain how to fill the field or its purpose. If you are just repeating yourself, don’t use a help text.
Template: <Optional sentence giving extra information on how this content will be used or why it's important.>
Tooltip
Tooltip appears when hovering the ? icon or a disabled button. They are not used to communicate critical information but to provide additional information.
Template: <Extra info in one sentence, not critical info but additional guidance. Did you know?>
Key takeaways
Do
Consider whether to display a default value or prompt users to select one when using a picker component
Asynchronous components are meant for complex selection lists.
Use predictable and logically ordered values
Always report to form patterns
Don't
Avoid imposing an illogical pre-selection as the default state
Use DateTimeRange for a single date, even if it's technically possible
Consider providing less granularity when specifying minutes in a date picker.
Create new/custom behavior patterns with form components
Decision tree to choose which picker based on your use case
