Date Field
A form input specifically for entering and selecting dates, supporting various date formats and validation. It provides an intuitive interface for date entry.
Basic
A date field allows users to enter and adjust date and time values using a keyboard. Each part of the date is shown in its own editable segment.
Installation
Install the component via the CLI in one command.
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.
This component comes packed with several components to enhance functionality and provide a seamless experience.
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install react-aria-components
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.
Design Intent UI
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.