Canary components are unstable components that are released for testing purposes.

We value any feedback from users willing to try them in their applications.

These components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.

For more information on Canary components, read our approach to releases and versions .

Additional details on the props and events for this component can be found in the Canary web components and Canary React storybooks.

The time input component enables people to provide a specific time using either direct entry or assisted selection. It ensures accuracy through the common 24-hour clock format, which displays time as HH:MM:SS.SSS where HH represents hours, MM represents minutes, SS represents seconds and SSS represents milliseconds. By default, users are asked to input hours, minutes and seconds; but this can be expanded to include milliseconds.

An example of the time input component.

Use a time input when asking people for a time they already know or can input without the use of a picker. Use a time input to allow users to select a specific time. For example, use a time input when asking for when an event took place or a duration as it may be quicker than navigating through a time picker. It works best for tasks that require accuracy and validation, such as scheduling meetings, setting timers, reminders and alarms, or adding time-based details like those in a travel itinerary.

Don't use a time input if the person only needs to enter a rough time of day such as morning or afternoon, or when fixed intervals such as every 15 minutes can be shown more simply with a dropdown menu or radio buttons. Do not use a time input when there are a set number of slots or appointments available.

Use content styling for help with building effective labels for people using time input.

Use helper text to provide additional information.

Use a default value to set the initial selection of a time. For example, with default value set to 12:00, the placeholder time will be replaced with 12:00.

Use sentence case for all labels, error text and helper text.

Use the time input properties to edit specificity and placeholder time.

Use helper text to indicate restrictions in a time input, such as operating hours.

Use error text to explain why an error has occurred and how it is fixed.

Do not use error or helper text to repeat the input label.

Do not add helper text solely to mirror other input fields. It should provide clarity or add value to the input.

Do not use periods in labels, error text and helper text unless more than one sentence is used.

Time input fields expect the time to be in the format HH:MM:SS.SSS with the last two elements of this as optional. They can be excluded through use of properties; helper and placeholder text must be adjusted to match the expected input.

Set a sensible default time to help users complete the field quickly but avoid defaults that don't make sense. For example, use the current time (now) when asking for a scheduled reminder. You can copy and paste a complete time into the time input.

Do not enable past times when using a time input to gather information about times in the future, such as a meeting time. Do not enable future times when using a time input to gather information about times in the past, such as time of birth. Use htmlautofocus to automatically focus a time input when it is the only input on a page.

Do not use htmlautofocus on a time input when it is part of a form with other inputs.

A time input will autofocus between the micro-inputs when an input is taking place. Micro-inputs are split between the 'HH', 'MM', 'SS', and 'SSS' inputs.

Use validation in the time input to show people when their entry is correct, needs attention, or contains an error. The time input component offers some standard validation rules and supports creating custom rules. Use the custom validation options to configure your own validation scenarios. For example, if it is required that the input time must be after another specific time then use an error validation message if the input time doesn't meet the condition. Use error messages when the user cannot continue without fixing their input.

Use the 'error' validation state within a time input to signify that the selected time is invalid. For example, when the time selections are outside of the specified “allowed” range.

Use the 'error' validation state within a time input when presented with an illogical time. For example, if a selected time reads “26:65”. Alternatively, round the values to the nearest maximum or minimum integer.

Use the 'error' validation state within a time input to signify that there is an issue in time selection. For example, when the time selections are partially complete or left blank.

Use warnings when the time can still be accepted but may not be what's expected. For example, setting a reminder for an unusual time such as 03:00 in the morning when booking an appointment.

Use the time input size properties to change the vertical size and achieve compact or spacious layouts.

Ensure the width of the time input allows enough space for the full length of a person's potential input. Where appropriate try and ensure that the time input field matches the length of other input fields nearby.