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.

Anatomy

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

 

 

 

 

 

Variations

  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

 

 

 

 

 

States

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