Time input

The time input component allows users to select and set a specific time value with no time zone. 

It contains both a scrolling time picker and a basic input field that restricts the type of data users can enter. Both ensure the users enter valid values.


Component data

Component resources:
SCSS files

Functional grouping: Forms

Demo

Configure: select the dropdowns below to display the variety of options that a time input field supports.


Code


				
			

Responsive preview

Usage best practices

Consider using time input when:

  • users are expected to enter a time or time range 
  • time is important data and requires accuracy

Usage examples:

  • schedulling an appointment
  • setting a phone reminder

Related components:

Do

Ensure date input control is large enough for mouse clicking and finger pressing.

Allow users to type the time in numerical form even if other input methods, such as calendar picker and scrolling date picker, are implemented. This ensures the time input is accessible to assistive technology users.

Ensure labels and instructions are clear and easy to understand so that users from different cultural backgrounds can distinguish.

Ensure the time format is clear by indicating AM/PM options or 24h format. 

In situations where both date and time input are required, decide the order of the two component based on users' goals and behaviours. For example, when booking an appointment, study shows that a good number of users already have a certain time slot in mind. Therefore it may be better to prioritize time input and use that input as a filter for the next available appointments. For booking a flight, however, it makes more sense to ask for date input first.

Don't

Do not split time inputs with drop-downs for hours and minutes. This adds unnecessary steps and increases interaction cost by adding additional clicks and scrolling.