DateField

Use DateField

DateField is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, DateField } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <DateField label="Start date" name="start" defaultValue="2026-10-26" order="day-month-year" />
    </FloodRoot>
  );
}

Design notes

• Uses three native text segments rather than an operating-system calendar popup. Calendar and DatePicker are separate contracts.
• Values are canonical YYYY-MM-DD dates from 0001 through 9999, or an empty string. min/max and leap years use civil date arithmetic without timezones.
• Arrow keys adjust segments. Left/Right move at segment boundaries; IME and modifier shortcuts remain available. Use explicit order and localized segmentLabels/messages.
• In editable fields, incomplete or invalid drafts block native submission; the hidden named field contains no stale previous date. Controlled values and form resets preserve host ownership.
• Read only retains copying and accepted canonical submission, even outside current bounds or application constraints. It bypasses native validity without accepting partial or refused drafts. Disabled fields and fieldsets remain excluded. Introduced in the unpublished 0.2.7 source candidate.

API reference