DateRangePicker.
Choose a start and end date with an inline calendar and inputs.
The preview uses the actual shared component, including your current theme, rounding, border and motion preferences.
Props & API reference
Parameters available in the shared component, including value types, requirements and accepted options.
| Parameter | Type | Required | Default | Possible values | Description |
|---|---|---|---|---|---|
value | {from?: string; to?: string} | Yes | — | — | Controlled ISO start/end dates. |
onValueChange | (range: DateRange) => void | No | — | — | Called when either date changes. |
label | string | No | Date range | — | Date-range dialog and trigger name. |
min | string | No | — | — | Minimum allowed ISO date. |
max | string | No | — | — | Maximum allowed ISO date. |
className | string | No | — | — | Additional CSS class on the outer component element. |