Date range picker

Range picker for start/end ISO dates with calendar selection and in-range treatment.

Date range picker returns a small object boundary and keeps range intent visible without introducing a date runtime dependency.

Experiment window

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Every state maps to the same component render route through the `state` query param.

Experiment window

Default

Closed range field.

Experiment window

April 2026

MonTueWedThuFriSatSun

Open

Open calendar with active range.

Experiment window

Partial

Start date selected while waiting for an end date.

Props

Name	Type	Default	Description
`value`	`DateRangeValue`	-	Controlled start/end ISO date object.
`defaultValue`	`DateRangeValue`	-	Uncontrolled initial range value.
`defaultOpen`	`boolean`	`false`	Initial calendar popdown state.
`min`	`DateValue`	-	Minimum selectable ISO date.
`max`	`DateValue`	-	Maximum selectable ISO date.
`onValueChange`	`(value: DateRangeValue) => void`	-	Receives the selected range.
`label`	`ReactNode`	-	Field label.