Usage
Time pickers allow users to enter a specific time value. They can be used for a wide range of scenarios.
Common use cases include:
- Setting an alarm
- Scheduling a meeting
Mobile time pickers are displayed in dialogs and can be used to select hours, minutes, and a period of time.
Principles
Familiar
The analog clock face option provides an added level of assurance and confirmation when picking times.
Flexible
Input types are flexible in order to account for a range of use cases and contexts.
Ergonomic
Time can be selected without significant adjustment of one’s hand position on a mobile device.
Anatomy
Time pickers can appear in an immersive dialog, or inline and compact.
Behavior
There are two primary methods for selecting time with the mobile time picker. Users can:
- Type in a specific value in the hour and minute fields.
- Select the hour or minute field from the text input and adjust the clock dial below to simultaneously change the corresponding time field above.
The clock dial interface adapts to a device’s orientation. In landscape mode the stacked input and selection options are positioned side-by-side.
Accessibility
On mobile devices, time pickers should allow manual time entry through text input, rather than exclusive use of the dial picker. The text input picker should be an available option that’s accessed from the dial picker when a user selects the keyboard icon. This interaction allows multiple input methods and makes the time picker accessible to assistive technology users.
Targets
Targets for mobile time pickers should be as large as possible filling the available space.