TimeInput

Usage

Example

Principles

• Only use a time input when you can expect the user to input a specific time. If it can be hard for the user to determine which time they should choose or if the selected time slot can be vague, let the user choose, for example, a time of day (e.g. morning) or a specific day etc.
• Pay close attention to the time input label. It should clearly describe the time the user is expected to input. A good label describes the input, such as "Event start time".
• HDS Time input does not validate time in any way. This means you need to make sure to validate the input if your project requires it.
• It is recommended to give the time input a default value.
• Because HDS time input forces the input to a specific format, it is not required to describe the expected format in the assistive text.
• As specified in the data format guidelines, Helsinki services use a 24-hour clock and can either use leading zeros or omit them. The time input will always show leading zeros.
• When asking for time ranges, you should use two separate time inputs instead of trying to use one input or picker for both times.
• Time is often asked alongside a date. Use the HDS date input for asking dates.

Should I use a time input or a select?

• Use time input when
  • when the user needs to input the time very accurately (e.g. a parking start time)
  • there are no strict format requirements or specific time slots available to show
• Use HDS select when
  • the time format is very strict, e.g. only XX:00 and XX:30 times are allowed
  • there are only a set amount of time slots available (e.g. reserving a doctor appointment)

Variations

Default

HDS TimeInput allows manual and accurate input for times. It is the best choice when the input needs to be very accurate or when a specific time slot cannot be determined for the user.

Using HDS Select for times

It is better to use HDS Select for selecting times when the time format is very strict or when there are only a set amount of time slots available.