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
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"
          rounding="medium"
          shadow="none"
          disabled={false}
          required={false}
          onChange={(newValue) => setValue(newValue)}
        />

Props API

32 props
Columns
Date Range Picker props API
Default
Description
aria-describedbystringNoaria—ARIA Describedby attribute forwarded to the relevant accessible element.
aria-labelstringNoaria—ARIA Label attribute forwarded to the relevant accessible element.
aria-labelledbystringNoaria—ARIA Labelledby attribute forwarded to the relevant accessible element.
classNamestringNostyling—Additional CSS class names for the component root.
data-testidstringNotesting—Test id used to identify the component in tests.
disabledbooleanNopropsfalseDisabled.
endLabelReactNodeNoprops"End date"End Label.
errorClassNamestringNoprops—Additional CSS class names for the error section.
errorMessageReactNodeNoprops—Error message or error state displayed with the component.
groupClassNamestringNoprops—Additional CSS class names for the group section.
helperTextReactNodeNoprops—Helper text displayed with the field.
helperTextClassNamestringNoprops—Additional CSS class names for the helper text section.