Time input

ECT approvedUpdated May 21, 2026

Description

A Time input captures time entered in hours and minutes.
Use it to capture:
Start and end times. For example, in a HR timesheet.
Duration. For example, in an invoice.

Figma library.

Anatomy

Anatomy

Size

Time input is available in S, M and L sizes.

Variations

Time format

24-hour

12-hour

Errors

Learn how to write error messages for a time input in the Content tab

Single field

All fields

Best practices

Allow a user to enter times in shorthand or common formats. Convert times to a format accepted by the database behind the scenes. See guidelines for capturing numeric data
Do not use placeholder text as it can cause usability and accessibility issues. Use a descriptive label and hint text instead. See guidelines for using placeholder text
Instead of a permanently read-only time field, use formatted text with no field border.

General rules

When writing hint text or error messages for a time input, follow these guidelines:

12-hour format

Use a.m. or p.m.
Use a colon (:) to separate hours and minutes
Add a space before a.m. or p.m. For example, "8:00 a.m.", "8:00 p.m."

24-hour format

Do not use a.m. and p.m.
Use a zero (0) before single digit hours. For example, "08:00"

Time ranges

Use the word to. For example, "8:00 a.m. to 4:00 p.m."
Do not use hyphens (-) and en dashes as they are difficult for screen readers to interpret.

Time abbreviations

Use a space between the number and abbreviation. For example, "4 h", "12 min".
When using several abbreviations together, remove the space to make scanning easier. For example, "4h 12min".
Do not use "24/7". Use a word or phrase instead. For example, always, all day, 7 days a week.

Error messages

Time input error message examples

Use case	What to do	Example error messages
No time in a required time input.	Highlight the full time input.	Enter a meeting time.
The time is incomplete.	Highlight the hours or minutes field where information is missing or incomplete.	Enter a time including hours.Enter a time including hours and minutes.
The time is not correct. For example, 75 in the hours field.	Highlight the hours or minutes field with the incorrect information. If it's not clear which field has incorrect information, highlight the full time input.	Enter hours that are 24 or less.
The time must be before another time.	Highlight the full time input.	Enter a start time that is before the end time.
The time must be after another time.	Highlight the full time input.	Enter an end time that is after the start time.
The time must be between 2 times.	Highlight the full time input.	Enter a time that is between 9 a.m. and 4 p.m.

Requirements

Users should be able to

Navigate to the input and enter a time using assistive technology.
Understand how a time should be formatted through appropriate labelling and hint text.

Interactions

Keyboard interactions

Tab. Moves focus from the previous interactive element on the page to the leading input.
Pressing ‘tab’ from the middle input moves focus to the trailing input.
Focus should not be moved to the next input as the user types the time.

Design considerations

The border of the input should have a 3:1 minimum contrast ratio with the background.
Each input should have a clear, visible label to allow users to know what value to enter.
Clear hint text should be provided to let users understand what time format to use.

Development considerations

Make sure that the time input has hint text with input instructions.
The inputs should be grouped within a fieldset to allow screen reader users to understand the relationship between the input fields.
An overall label should be provided by a legend to communicate the purpose of the time input.
Using the fieldset and legend negates the need for explicit association of the fields with the hint text.
Make sure that the legend is a direct child of the fieldset to ensure valid HTML.

Date	Changes
April 2026	Changed label text from abbreviations to full words: Hrs. to Hours and Mins. to Minutes.Hid AM/PM toggle by default.Applied min width to the container inputs: S - 48px, M - 56px, and L - 64px.
August 2025	Updated guidance on the accessibility tab.
May 2025	Removed 'Stepper' buttons.Updated the behaviour to match html time inputs.
March 2024	Added warning to disabled state.
October 2023	Updated all images that includes the new toggle button.
August 2023	Created component.