DateRangeField

Use DateRangeField

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

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <DateRangeField label="Travel dates" startName="start" endName="end" defaultValue={{start:"2026-10-12",end:"2026-10-18"}} />
    </FloodRoot>
  );
}

Design notes

• The value is {start,end}, with canonical YYYY-MM-DD dates or empty endpoints. Editable partial, reversed, unavailable and refused ranges block native submission. Readonly submits a complete ordered accepted pair despite current bounds/availability; partial, reversed and refused pairs stay atomic empty values.
• Both named bridges represent one range contract. The group owns relationship validation while each DateField preserves its calendar validity and keyboard behavior.
• Start/end names and labels are explicit; min/max, readonly/disabled, status and form reset follow the field contracts.
• Use DateRangePicker for visual interval selection. Introduced in 0.2.7.

API reference