Time Field
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/time-field
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components
Examples
Hour cycles
Change the hour format in the time field by using the hourCycle prop.
Validation
Set isRequired to require a time when the form is submitted.
Controlled
Pass value and update it with onChange to control the time field.
Readonly
Set isReadOnly to prevent edits while keeping the time field focusable.
Disabled
A disabled time field cannot be interacted with and is visually represented as being inactive.
Component API
TimeField
TimeField extends the React Aria Components <TimeField> component.
classNamestringTimeInput
TimeInput extends the Intent UI <DateInput> component.
classNamestringSee the React Aria for the full API reference.
