Time Picker
ProA time selection component with hour, minute, and optional AM/PM segments. Supports both a scrollable dropdown list and direct text entry. Configurable step intervals (15 min, 30 min, 1 hour) for common scheduling use cases.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| 12-hour | ||
| 24-hour |
Usage Guidelines
Do
Support both typing and selecting from the dropdown.
Don't
Force a 12-hour format in locales that use 24-hour time.
Do
Show the expected format as placeholder text (e.g., "HH:MM").
Don't
Show all 1440 minutes of the day — use step intervals.
Do
Use appropriate step intervals to match the scheduling context.
Don't
Separate hour and minute into two distinct fields without grouping.
Code
Design Tokens
Accessibility
- Time input uses aria-label describing the field (e.g., "Meeting time").
- Dropdown list uses role="listbox" with role="option" for each time slot.
- Selected time uses aria-selected="true" in the dropdown.
- Keyboard navigation wraps from the last time to the first and vice versa.