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.

Event time
12
00
AM

Installation

In the terminal, run the following command to begin:
npx hq-kit add time-field

Hour Cycles

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

Event time
13
45

Validation

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

Event time
––
––
AM

Controlled

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

11:45:00

Event time
11
45
AM

Disabled

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

Event time
––
––
AM
Date FieldDate Picker