Time Field

Punch in times down to the minute, ideal for setting reminders or scheduling meetings, like setting your alarm clock for another busy day..

Basic

A time field allows users to input and adjust time values using a keyboard, with each segment of the time shown as its own editable unit.

Installation

Hour Cycles

Change the hour format in the time field by using the hourCycle prop.

Validation

To ensure the time field is properly filled out, use the isRequired prop.

Controlled

In a controlled time field, the value is provided as a prop, and the field is not editable by the user.

Disabled

A disabled time field cannot be interacted with and is visually represented as being inactive.