Time picker

Definition: A time picker is an element for choosing a specific time.

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.


  1. Label
  2. Right icon
  3. Inputs
  4. Call out
  5. Field







  1. Top label (Recommended for forms as it can help improve accessibility.)
  2. Left label (For legacy products)
  3. Time picker with AM / PM indicator







  1. Enabled
  2. Hover
  3. Focused
  4. Read only (White)
  5. Read only (Grey)
  6. Error
  7. Error focused
  8. Disabled