When to use
Use a time picker when users need to input or select a specific time, especially when it's in combination with a date input.
Anatomy
- Label
- Right icon
- Placeholder + typed text input + selected value
- Call out
- Field
Variations
- Top label (Recommended for forms as it can help improve accessibility.)
- Left label
- Time picker with AM / PM indicator
States
- Enabled
- Hover
- Focused
- Read only (White)
- Read only (Grey)
- Error
- Error focused
- Disabled