DateField

A field on the browser’s own date input (type="date"). The value is YYYY-MM-DD.

Import

ts
import { DateField } from '@k8ordo/ui';

Usage

tsx
<DateField aria-label="Date" defaultValue="2026-09-25" name="eventDate" />

Min / Max

The browser checks the range itself: a date outside it reports rangeUnderflow / rangeOverflow.

tsx
<DateField
  aria-label="Date"
  defaultValue="2026-09-25"
  max="2026-12-31"
  min="2026-09-01"
/>

Disabled

tsx
<DateField aria-label="Date" defaultValue="2026-09-25" disabled />

Invalid

tsx
<DateField aria-label="Date" invalid />

With @k8ordo/form

Spread the input derived from z.iso.date() as is. There is no need to take type out.

tsx
// schema.ts
export const eventSchema = z.object({ eventDate: z.iso.date() });

// event-form.tsx
const eventDate = form.field('eventDate');

<FormControl
  errorText={eventDate.error}
  invalid={eventDate.invalid}
  label="Date"
  required={eventDate.required}
  renderInput={(props) => <DateField {...props} {...eventDate.input} />}
/>

Props

invalid?
Type: boolean
Default: false
ref?
Type: Ref<HTMLInputElement>
Default: -

Type base (some attrs are managed internally): InputHTMLAttributes<HTMLInputElement>

Components