DateRangePicker

DateRangePicker pairs two native date inputs for reporting ranges, audit filters, and planning windows.

#Default usage

<DateRangePicker defaultValue={{ from: "2026-05-01", to: "2026-05-07" }} />

#Import

import { DateRangePicker } from "@froggdesign/enter-ui-react";

#States

#Accessibility

DateRangePicker uses two native date inputs with Start date and End date labels. Wrap it in Field or add surrounding copy when the range purpose needs more context.

#API

• value, defaultValue, and onValueChange use { from?: string; to?: string }.
• min and max constrain native date inputs.
• disabled and invalid map to aria state and data attributes.
• Supports native div props and className.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.