Date Range Picker

The DateRangePicker component is used to select a range of dates with support for different configurations and validations.

Usage & Examples

Default

Report range

Start date

End date

Choose the date range used for the report.

default.tsx

<DateRangePicker
        label="Report range"
        startLabel="Start date"
        endLabel="End date"
        labelPosition="top"
        value={value}
        min="2026-01-01"
        max="2026-12-31"
        helperText="Choose the date range used for the report."
        theme="primary"
        outline={false}
        glass={false}
        rounding="medium"
        shadow="none"
        disabled={false}
        required={false}
        onChange={(newValue) => setValue(newValue)}
      />

Props API

Date Range Picker props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	ARIA Describedby attribute forwarded to the relevant accessible element.
`aria-label`	`string`	No	aria	`—`	ARIA Label attribute forwarded to the relevant accessible element.
`aria-labelledby`	`string`	No	aria	`—`	ARIA Labelledby attribute forwarded to the relevant accessible element.
`className`	`string`	No	styling	`—`	Additional CSS class names for the component root.
`data-testid`	`string`	No	testing	`—`	Test id used to identify the component in tests.
`disabled`	`boolean`	No	props	`false`	Disabled.
`endLabel`	`ReactNode`	No	props	`"End date"`	End Label.
`error`	`ReactNode`	No	props	`—`	Error message or error state displayed with the component.
`errorClassName`	`string`	No	props	`—`	Additional CSS class names for the error section.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Glass.
`groupClassName`	`string`	No	props	`—`	Additional CSS class names for the group section.
`helperText`	`ReactNode`	No	props	`—`	Helper text displayed with the field.