Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputPrinciplesAccessibilityUsage and variationsDemos & APIToggle buttonTooltip
Patterns
About
Contributing
Resources

Time input

DraftAccessible

A time input helps the user select a specific time.

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 an 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)

Accessibility

  • Note! hoursLabel and minutesLabel are required properties. They improve component navigation for screen reader users.
  • HDS time input allows the user to input the date manually. Whenever you require the user to input times, you should also allow the manual input.
  • Be wary of automatically correcting input for the user. If this is done, the user (especially with screen readers) needs to be clearly notified about the change.

Usage and variations

Time input

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.

:
Assistive text

React code example:

<TimeInput
id="time"
label="label"
hoursLabel="hours"
minutesLabel="minutes"
helperText="Assistive text"
defaultValue="12:00"
/>

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.

    React code example:

    <Select
    required
    label="Label"
    placeholder="Placeholder"
    helper="Assistive text"
    options={[
    { label: '12:00' },
    { label: '14:00' },
    { label: '16:00' },
    { label: '18:00' },
    ]}
    />

    Demos & API

    Core

    Not included in hds-core!

    React

    Time inputs in hds-react

    TimeInput API