Form Elements
Time Picker
Time picker allows users to select a specific time or time range. It ensures inputs are formatted correctly and eliminates the need for manual typing. They are frequently used for booking appointments, setting alarms and scheduling calendar events.
Examples
Closed
Select time
Opened
Select time
Selected
07 : 40 PM
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- Keyboard time entry supported
- ARIA combobox pattern for dropdown
- Screen reader announces selected time
- Focus ring visible at 2px offset
- Minimum 44px touch target
When to use this component
✓Do's
- •Users need to select a time for scheduling appointments
- •Collecting time-based information for services or events.
- •Setting deadlines or reminders with time-of-day precision
- •Forms that need a structured time input (not free text)
✗Don'ts
- •If users choose from a fixed set of time slots, use a Select or Slot Grid
- •If both date and time are required, combine a Date Picker with a Time Picker.
- •If users need to enter a duration, use a numeric input with units
- •If only a few time options are available (2–4), use Radio buttons
Do's and Don'ts
✓ Do's
07 : 40 PM
Use 12-hour format with AM/PM for citizen-facing Indian government services. 78% of users prefer this format.
✗ Don'ts
07:40
Don't use 24-hour format for public-facing services, research shows most Indian citizens prefer 12-hour format with AM/PM indicators.