Time Picker
A time selection component supporting 12-hour and 24-hour formats with customizable minute intervals and validation states.
Basic Time Picker (12-hour)
:
24-hour Format
:
With Default Value
:
2:30 PM is pre-selected
States
:
Select when you want to be reminded
:
Please select a valid time
:
Minute Intervals
:
Select time in 5-minute increments
:
Select time in 15-minute increments
:
Select time in 30-minute increments
Clear Button Variants
:
Click X to clear the time
:
Time cannot be cleared
Required Field
:
This field is required
Combined Use Cases
:
Business hours start time
:
Business hours end time
Props
| Name | Type | Default | Description |
|---|---|---|---|
label* | string | - | Time picker label text |
placeholder | string | - | Placeholder text (not typically used) |
value | string | - | Controlled time value (HH:mm format) |
defaultValue | string | - | Uncontrolled default time (HH:mm format) |
format | '12' | '24' | '24' | Time format (12-hour or 24-hour) |
minuteInterval | number | 5 | Minute increment (5, 15, 30, etc.) |
showClearButton | boolean | true | Show X button to clear time |
disabled | boolean | false | Whether time picker is disabled |
required | boolean | false | Whether time is required (shows * indicator) |
error | string | - | Error message to display |
helperText | string | - | Helper text below time picker |
onChange | (time: string) => void | - | Callback when time changes (HH:mm format) |
onBlur | () => void | - | Callback when picker loses focus |
Usage Guidelines
When to use
- •For scheduling appointments, meetings, or events
- •When users need to select a specific time of day
- •For setting reminders, alarms, or notifications
- •When collecting business hours or availability windows
Best practices
- •Use 12-hour format for consumer-facing applications in regions where it's common
- •Use 24-hour format for technical or international applications
- •Set appropriate minute intervals based on use case (e.g., 30 min for meetings, 5 min for precise scheduling)
- •Provide clear labels that indicate what the time is for
- •Use helper text to provide context or examples (e.g., "Store opens at 9:00 AM")
- •Allow clearing time for optional fields, disable clear button for required fields
Accessibility
- •Keyboard accessible (Tab, Arrow keys for navigation)
- •ARIA attributes: aria-invalid, aria-describedby, aria-label
- •Error messages announced with aria-live
- •Focus indicators visible on select inputs
- •Label properly associated with time picker
- •Required fields indicated with * and aria-required
- •Hour, minute, and period separately labeled for screen readers
- •Clear button accessible via keyboard
Do's and Don'ts
✓ Do
- •Use appropriate time format based on user locale and context
- •Set minute intervals that match the precision needed
- •Provide clear labels and helper text for context
- •Show validation errors immediately when time is invalid
- •Use consistent time format throughout your application
:
Select meeting start time
✗ Don't
- •Don't use 1-minute intervals unless absolutely necessary (overwhelming options)
- •Don't mix time formats (12h and 24h) in the same form
- •Don't use vague labels like "Time" without context
- •Don't allow clearing required time fields
- •Don't forget to validate time ranges when using start/end times
: