Skip to main content

Timepicker

Example
Live

The Timepicker example automatically formats a users time input.

Usage​

The Time Picker example is a combination of input fields that offer guided formatting to improve the consistency and correctness of time entry. In addition to having the hour and minute fields, the AM/PM selector provides greater clarity and accurateness for the inputed time of day.

When to use​

Use a Time Picker with an input field when users are required to enter a time of day that is known and/or flexible. Use a Time Picker with select fields when a users can only select from a set of available times.

When to avoid​

Avoid using a Time Picker if the concept of AM/PM is irrelevant or confusing, consider the Time variant of the Input Format component.