DatePicker

Use DatePicker

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

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <DatePicker label="Start date" name="start" defaultValue="2026-10-26" today="2026-10-26" />
    </FloodRoot>
  );
}

Design notes

• Composes Flood DateField, Calendar and Popover; text input and visual selection share one canonical value and form bridge.
• Activate the calendar icon or Alt+ArrowDown in a segment. Escape/outside dismissal returns or preserves intended focus through the existing overlay engine. Selecting a day closes the calendar.
• Read only and disabled prevent opening or date changes; native disabled fieldsets remain inert. Invalid/incomplete drafts retain native DateField validation.
• Controlled value and open state are independently host-owned. Native form reset restores the initial uncontrolled date and preserves cancelled resets. Translate calendarLabel/openCalendarLabel, month navigation, segment labels and messages.
• DateField remains the keyboard-entry primitive; Calendar remains independently usable. Introduced in the unpublished 0.2.7 source candidate.

API reference