Date Field
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/date-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 cn
Examples
Date time field
You can also use the date field to select both date and time.
Validation
When validation is applied, the date field will show a validation message if the entered value is invalid.
Controlled
In a controlled date field, the value must be passed as a prop, and the field is not directly editable by the user.
Uncontrolled
In a controlled date field, the value must be passed as a prop, and the field is not directly editable by the user.
Readonly
In a readonly date field, the value is provided as a prop, and the field is not editable by the user.
Disabled
A disabled date field is non-interactive and visually represented in a disabled state.
Component API
DateField
DateField extends the React Aria Components <DateField> component.
classNamestringDateInput
DateInput extends the React Aria Components <DateInput> component.
classNamestringSee the React Aria for the full API reference.
