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.

Preview

Code

Event time

If you hit any issues, make sure you check out the installation guide here.

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Time Field's decked out with several components to make it bangin'.

Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

Enter dates directly into this field, perfect for logging events or deadlines with the precision of a historian noting important events.

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

And next, you can copy the code below and paste it into your dopest component folder.

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

Preview

Code

24 hour

Event time

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

Preview

Code

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

Preview

Code

11:45:00

Event time

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

Preview

Code

Event time

––