# DateRangeField

A date window with native calendars, useful presets and clear boundaries.

- Family: Forms, imported from `mizu-ui` or `mizu-ui/forms`
- Docs: https://mizu.user64bit.world/components/date-range-field
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/forms/DateRangeField.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { DateRangeField } from "mizu-ui";

export function Example() {
  const [range, setRange] = useState({
    start: "2026-10-15",
    end: "2026-10-21",
  });
  return (
    <DateRangeField
      label="Reporting window"
      value={range}
      onValueChange={setRange}
      defaultValue={{ start: "2026-10-15", end: "2026-10-21" }}
      min="2026-01-01"
      max="2026-12-31"
      hint="Choose a window, or start with a preset."
      presets={[
        {
          label: "Sample week",
          value: { start: "2026-10-15", end: "2026-10-21" },
        },
        {
          label: "Sample month",
          value: { start: "2026-10-01", end: "2026-10-21" },
        },
      ]}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/date-range-field
```

## Props

- `label / hint / error`: `string / ReactNode / string`. Group name, shared help and external validation feedback.
- `value / defaultValue / onValueChange`: `DateRange / DateRange / function`. Controlled or initial { start, end } date-only strings. Empty strings preserve an incomplete range. defaultValue is also the reset target.
- `presets`: `readonly DateRangePreset[]`. Named { label, value } ranges. Incomplete, invalid and out-of-bounds presets are disabled.
- `min / max`: `string`. Inclusive boundaries in YYYY-MM-DD format. Dates are compared without local timezone conversion.
- `startName / endName`: `string` (default `"start" / "end"`). Native form-data field names.
- `required / disabled / readOnly`: `boolean`. Native validation and interaction states. Clear empties both dates; Reset restores the initial defaultValue.

## Accessibility

A fieldset and legend group two individually labelled native date inputs. Help and errors describe both inputs. End cannot precede start; invalid ranges block native form submission. Native calendars retain platform keyboard behavior and locale formatting. Native form reset restores defaultValue and reports the range through onValueChange.

## Motion

Native date picking and immediate value changes; no forced travel.