Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Time-zone pickers are common in the user settings of an application or website, and in applications that support real-time data and reporting.
This component is a combination of the text field and the grouped menu components.
Please check the Text Field and Grouped Menu documentations for more Dos and Dont’s.
Best Practices
- Where possible, identify the user’s time zone based on their location and allow them to change it if they need to.
- Organize time zones alphabetically by city and make sure to display the country and the offset as well.
- Let the user search in the time-zone dropdown list.
- Allow the user to search by city, country, state (where applicable) and offset.
- When defining more than one default time zone, let the user know the difference between the default zones.
Dos and Don'ts
Facilitate readability
To separate cities, states, and countries, use a comma instead of a slash, and add a space before the offset to make the options easier to perceive.
Do
Separate location items with commas.
Don't
Don't use slashes without any spacing to separate location items.
Location first
Users typically think about the time in a city or region instead of a particular offset.
Do
Start the option with the location and place the offset to the end.
Don't
Don't place the offset to the beginning of the option: this can slow down the user when looking for the correct time zone.
Inform the user about default zones
When defining default zones, it is a good practice to let the user know what each default means.
Do
Inform the user about what the different default zones mean by adding a subtext to the label.
Don't
Don’t define default zones without explaining what they represent.
Related Components & Patterns