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)}
        />

Visual variants

Themes

primary
Report range
Choose the date range used for the report.
secondary
Report range
Choose the date range used for the report.
tertiary
Report range
Choose the date range used for the report.
quaternary
Report range
Choose the date range used for the report.

States

success
Report range
Choose the date range used for the report.
warning
Report range
Choose the date range used for the report.
error
Report range
Choose the date range used for the report.
info
Report range
Choose the date range used for the report.

Sizes

xs
Report range
Choose the date range used for the report.
small
Report range
Choose the date range used for the report.
medium
Report range
Choose the date range used for the report.
large
Report range
Choose the date range used for the report.

Variants

solid
Report range
Choose the date range used for the report.
outline
Report range
Choose the date range used for the report.
glass
Report range
Choose the date range used for the report.

Rounding

none
Report range
Choose the date range used for the report.
medium
Report range
Choose the date range used for the report.
large
Report range
Choose the date range used for the report.

Shadows

none
Report range
Choose the date range used for the report.
light
Report range
Choose the date range used for the report.
strong
Report range
Choose the date range used for the report.
visual-variants.tsx
// Themes
<DateRangePicker theme="primary"
          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)}
        />
<DateRangePicker theme="secondary"
          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)}
        />
<DateRangePicker theme="tertiary"
          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)}
        />
<DateRangePicker theme="quaternary"
          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)}
        />

// States
<DateRangePicker state="success"
          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)}
        />
<DateRangePicker state="warning"
          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)}
        />
<DateRangePicker state="error"
          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)}
        />
<DateRangePicker state="info"
          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)}
        />

// Sizes
<DateRangePicker size="xs"
          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)}
        />
<DateRangePicker size="small"
          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)}
        />
<DateRangePicker size="medium"
          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)}
        />
<DateRangePicker size="large"
          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)}
        />

// Variants
<DateRangePicker variant="solid"
          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)}
        />
<DateRangePicker variant="outline"
          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)}
        />
<DateRangePicker variant="glass"
          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)}
        />

// Rounding
<DateRangePicker rounding="none"
          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)}
        />
<DateRangePicker rounding="medium"
          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)}
        />
<DateRangePicker rounding="large"
          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)}
        />

// Shadows
<DateRangePicker shadow="none"
          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)}
        />
<DateRangePicker shadow="light"
          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)}
        />
<DateRangePicker shadow="strong"
          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)}
        />

Interaction states

Disabled
Report range
Choose the date range used for the report.
interaction-states.tsx
// Disabled
<DateRangePicker disabled
          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.