Pickers
Pickers allow users to select content from a set of values, usually presented in a list or dropdown menu.
Last updated
Pickers allow users to select content from a set of values, usually presented in a list or dropdown menu.
Last updated
Different types of pickers can be used in forms. Choosing the right picker depends on the type of answers requested and their number.
Select is the most basic picker element. It lets the user select one item within a list of provided options. This component will be preferred for small lists (approx. 15 items) that do not require the specific features of Async Select.
For 3 options or less, use RadioGroup component.
Within the Selection List, you may arrange options by bundles with title separators. Learn more about Selection List.
We provide multiple features to custom the field, such as: Label, Requirement Indicator (Red Asterix), Tooltip, Placeholder Value and Helptext
How should I set my Select Component to its default state?
If there is one answer that seems more logical within all options, it would be a good practice to fill it as a pre-selected but overridable answer.
Example: As a user, I want to set my platform language. On the settings page, the component Select is already set on the "English" value because it is the most preferred language in my company. But still, I can edit it if I need to.
However, if no options seem more logical as a default choice, it would be a better option to prefill with a "blank option" : - - Select - -. It will guide users to make their own choice.
Example: As a user, I must fill in my personal information, including my civility. Because I did not provide any information about it beforehand, the field at its default state should remain empty with a placeholder.
Note: This blank option will not be considered a correct answer for a required field. If users try to save the form, the component will be in error state. Learn more about errors in forms
Async Select is a variation of Select component. It lets users select one item within a provided list of options. It has the same core design guideline.
However, this variant is specifically made for a long and/or complex list of options.
From a technical perspective, the options list will be recovered only when users open Async Select component. It means a potential loading state. Also, this component allows a partial loading of options which is a real comfort for technical performances.
With this component, users can search for their answers in an integrated Search Bar.
Multi Select is a form component that lets users select multiple items from a list. Users are not limited in the number of answers.
On empty mode, Multi Select is distinguished by its "+" ("add") icon on the far right corner (rather than a dropdown arrow for a Single Select).
Selection List opens in an overlay when the user clicks on the field. To each line, a checkbox + blue background appear when selected. Also, for each chosen line, a corresponding chip populates the field.
Selection List stays open until users click on CTA "Done".
If users click outside of Selection List, 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.
With this component, users can search for their answers in an integrated Search Bar when the list has more than 20 items.
When disabled with value, the picker shows all the selected values and cannot be collapsed.
Async Multi Select is a variation of Multi Select component. It allows users to select multiple items within a list. It has the same core design guideline.
However, this variant is specifically made for a complex list of options. Whether because of the large number of choices or because of long labels, etc ... With this component, users can search for their answers in an integrated Search Bar. Moreover, this component allows partial loading of the Selection List , which is a real comfort for technical performances.
💡To introduce the search bar, the placeholder text is "Search..."
Time Picker is a Select component dedicated to time (hours & minutes). It can be distinguished from a Select by its "Time" icon on the far right corner of the field, but it has the same overall behavior.
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 the simplest dedicated component to let the user select a date value. With this picker, users can only select one day in the calendar (no range, no time).
Date Picker is distinguished by its "calendar" icon on the far right corner of the field. Also, the Placeholder "Select date" helps users to understand they have to select a precise day.
⚠️ Inputs are unwritable. Users cannot enter a date manually. Choosing a date from the calendar is the only way to select a value.
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.
Its only differences are the Placeholder text "Select a period" to help users understand they must select a period. Also, the calendar overlay shows two months in a row rather than only one for a Date Picker.
It is possible to force a given time range, e.g. 4 days minimum.
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.
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.
Label is not mandatory, as we might need to overstack several pickers for a single label. However, this practice should be used sparingly with caution.
It can be overwhelming or difficult for some people to understand how to fill an input without a label. We recommend defining a label adjacent to the field.
In cases where we overstack several pickers for a single label, the gap between each field should be minimal (16px max).
Use placeholder to guide users in their selection
Think wise about the volume of items in the Selection List, should your component be Async.
Use predictable and logically ordered values
Always report to form patterns
Force an unlogical pre-selection as the default state
Use DateTimeRange for a single date
Consider providing less granularity when specifying minutes in a date picker.
Create new/custom behavior patterns with form components
Default text is always -- Select --.
Default text is always -- Select --.
Search placeholder text is always Search.
Primary CTA is always Apply.
Secondary CTA is always Cancel.
Default text is always -- Select --.
Search placeholder text is always Search.
Primary CTA is always Apply.
Secondary CTA is always Cancel.
Placeholder text is always Select time.
Placeholder text is always Select date.
Primary CTA is always Apply.
Secondary CTA is always Cancel.
Placeholder text is always Select period.
Primary CTA is always Apply.
Secondary CTA is always Cancel.
Placeholder text is always Select period.
Primary CTA is always Apply.
Secondary CTA is always Cancel.
