Getting Started
Dark Mode
Charts
Colors
Drag-and-drop
Forms
Utilities
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
If you hit any issues, make sure you check out the installation guide here for more information.
Composed Components
Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.
The Time Field comes packed with a variety of components to make it stand out.
Manual Installation
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
Hour Cycles
Change the hour format in the time field by using the hourCycle prop.
Prefix
A demonstration of how to add a prefix to the time field component for enhanced clarity or customization.
Suffix
A demonstration of how to add a suffix to the time field component to provide additional context or customization.
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.
11:45:00
Readonly
In a readonly 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.