Date Field

Enter dates directly into this field, perfect for logging events or deadlines with the precision of a historian noting important events.

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.

Event date
mm
dd
yyyy

Installation

In the terminal, run the following command to begin:
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.

Thursday, February 6, 2025

2025-02-06

Event date
2
6
2025

Date Time Field

You can also use the date field to select both date and time.

Event date
2
6
2025
20
49

Validation

When validation is applied, the date field will show a validation message if the entered value is invalid.

Event date
mm
dd
yyyy

Disabled

A disabled date field is non-interactive and visually represented in a disabled state.

Event date
mm
dd
yyyy