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.
Preview
Code
Event date
Installation
CLI
Manual
npx hq-kit add date-field
Controlled
In a controlled date field, the value must be passed as a prop, and the field is not directly editable by the user.
Preview
Code
Thursday, February 6, 2025
2025-02-06
Event date
Date Time Field
You can also use the date field to select both date and time.
Preview
Code
Event date
Validation
When validation is applied, the date field will show a validation message if the entered value is invalid.
Preview
Code
Disabled
A disabled date field is non-interactive and visually represented in a disabled state.
Preview
Code
Event date