Forms
Date range picker
Pick a start and end date together, with presets for the ranges people ask for most.
Not documented yet
This component ships in the design system and is fully supported. What is missing is the guidance around it: when to reach for it, the do and don't, and the accessibility notes. Until that is written, Storybook is the reference for variants, props and live controls.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | DateRange | undefined | — | The currently selected range (controlled). |
onChange | ((range: DateRange | undefined) => void) | undefined | — | — |
presets | DateRangePreset[] | undefined | DEFAULT_RANGE_PRESETS | Quick-pick presets shown beside the calendar; pass an empty array to hide the column. |
numberOfMonths | 1 | 2 | undefined | 2 | Number of months displayed. |
placeholder | string | undefined | "Pick a date range" | — |
id | string | undefined | — | — |
className | string | undefined | — | — |