Skip to main content Skip to navigation Skip to search

The time input uses the native HTML Time Input.

Usage

Use a time input when user is expected to enter a time (hours and minutes, and optionally seconds).

States

Enabled

Use when interactive and ready for input.

Active

Use when selected by a user with an input method, such as mouse or keyboard.

Disabled

Use when not interactive. For example, when a user does not have permissions to edit the input.

This time is not available

Error

Use to communicate a user or system error. This validation can happen when the user moves away from the input or after attempting to submit a form. For example, invalid input or username already taken.

Changes saved

Success

Use to provide real-time feedback immediately after a user’s input. For example, username available.

Layouts

Time picker is available in vertical, horizontal, and compact layout. See more layout guidelines on the form page.

Vertical

message text

Horizontal

message text

Compact

message text