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.
Location first
Users typically think about the time in a city or region instead of a particular offset.
Inform the user about default zones
When defining default zones, it is a good practice to let the user know what each default means.
Related Components & Patterns