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
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
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
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.