Time Picker

A component that allows the user to select a specific time.

Usage


Include AM/PM selector when using 12h format

Do
Time picker with 'AM' displayed.

Include an AM/PM selector when a 12-hour format is used.

Don't
Time picker without 'AM/PM' displayed.

Don’t exclude the AM/PM selector with the 12-hour format.

 

Use correct time format according to locale

When a list of options is presented, be sure to include a label describing the list. This will provide clarity for the user, especially when screen readers are involved.

Do
Time picker adjusting to users locale 12 or 24-hour times.

Use a 12-hour or 24-hour clock according to the user’s locale.

Don't
Time picker not adjusting to users locale 12 or 24-hour times.

Don’t use the 12-hour time format for locales that use the 24-hour format and vice versa.