On this page
Overview
Where people write AM and PM, a third wheel holds them.
Show code, StartTime.tsx
Anatomy
Field
Control
Label
Value
Clear
Clock icon
Description
Show code, TimePickerAnatomy.tsx
Popup
Column
Time
Actions
Show code, TimePickerPopupAnatomy.tsx
Behaviour
The locale's clock
The same value on a 12-hour and a 24-hour clock, as people there write it, and on the 24-hour clock in New York too, where the field sets its own clock. The value itself stays on the 24-hour clock.
Show code, ClockConventions.tsx
Steps
The minutes wheel offers a time on each step the field sets, here every quarter hour, every 5 minutes and every minute. A wheel with fewer values than it shows rows, such as every 15 minutes, stops at its ends rather than going round.
Show code, MinuteSteps.tsx
Rules
Offer only the times people can choose.
Use it when
- A time of day without a date, such as when a shift starts
- Times on steps, such as every quarter or half hour
Within office hours
Offer the times that can be booked: between an earliest and a latest time, on steps such as every half hour.
- A value between the steps still shows, in its place.
Show code, OfficeHours.tsx
A time that can't change
Show it read-only, not disabled.
Accessibility
| Key | Action |
|---|---|
| Enter, Space, ↓, ↑ on the field | Opens the popup at the chosen value. |
| ↑, ↓ on a wheel | Chooses its previous or next value, wrapping around. |
| ←, → | Moves to the next wheel. |
| Esc | Closes the popup and returns focus to the field. |
| Backspace, Delete on the field | Clears a clearable field. |