DatePicker

Any date a person enters; use DateField when a calendar is not wanted.

import { DatePicker } from "@hackcove/ui";

<DatePicker label="Date of birth" description="As on your ID document." />

import { Input } from "@hackcove/ui";

<Input aria-label="Date of birth" placeholder="DD/MM/YYYY" />

import { DatePicker } from "@hackcove/ui";

<DatePicker
  label="Paid on"
  description="The day the money moved."
  error="That date is before the invoice."
/>

import { DatePicker } from "@hackcove/ui";

<DatePicker label="Paid on" description="The day the money moved." isInvalid />

import { Caption, DatePicker, fromISODate, Stack, toISODate } from "@hackcove/ui";
import { useState } from "react";

function Example() {
  const [paid, setPaid] = useState(fromISODate("2026-10-26"));
  return (
    <Stack gap="xs">
      <DatePicker label="Paid on" name="paidOn" value={paid} onChange={setPaid} />
      <Caption>Stored as {toISODate(paid) || "nothing yet"}.</Caption>
    </Stack>
  );
}

import { DateField } from "@hackcove/ui";

<DateField label="Date of birth" description="DD/MM/YYYY" />

• A date is a DatePicker or a DateField, never an Input. The format is always DD/MM/YYYY and weeks start on Monday, whatever the browser's locale.
• DatePicker adds a calendar button; DateField is the same input without it, for a date the person knows by heart (a birthday).
• These two draw their own label: give them label and description, and do not wrap them in a Field.
• A message from outside, a server's say, is error; it replaces the description. An impossible date, such as 31/02/1990, shows its own message. isInvalid alone marks the field with no reason, so pair it with errorMessage.
• The value is a CalendarDate (value, defaultValue, onChange, minValue, maxValue). fromISODate reads a stored YYYY-MM-DD and toISODate writes one.
• name posts the date as YYYY-MM-DD in a form, or an empty string.

• The label names a role="group"; each of day, month and year is its own editable segment (role="spinbutton"), so a person can type digits or use the arrow keys.
• The description is the field's aria-describedby; the error and the built-in messages replace it, and an error is role="alert".
• The calendar button is labelled "Calendar" and opens a popover dialog, with a Month and a Year select, arrow-key movement across days and a Clear button.
• Inside a Dialog or Drawer the calendar opens inside it, so it still takes focus.
• The focus ring comes from the component.