DateRangeInput

A date range picker input that opens a calendar popover for selecting a start and end date.

Examples

Default

Window

Choose Window

<DateRangeInput {...args} onChange={setValue} value={value} />

Empty

Window

Choose Window

<DateRangeInput {...args} onChange={setValue} value={value} />

With Clear

Window

Choose Window

Clear Window

<DateRangeInput {...args} onChange={setValue} value={value} />

With Constraints

Window

Choose Window

<DateRangeInput
  {...args}
  max={plainDateCreate(2026, 5, 28)}
  min={plainDateCreate(2026, 5, 5)}
  onChange={setValue}
  value={value}
/>

Disabled Weekends

Window

Choose Window

<DateRangeInput
  {...args}
  getIsDateDisabled={date => date.dayOfWeek === 6 || date.dayOfWeek === 7}
  onChange={setValue}
  value={value}
/>

Disabled

Window

Choose Window

<DateRangeInput {...args} onChange={() => {}} value={defaultRange} />

Loading

Window

Choose Window

<DateRangeInput {...args} onChange={() => {}} value={defaultRange} />

Error Status

Window

Choose Window

End date must be after start date

<DateRangeInput {...args} onChange={setValue} value={value} />

Warning Status

Window

Choose Window

Range exceeds 7 days

<DateRangeInput {...args} onChange={setValue} value={value} />

Single Month

Window

Choose Window

<DateRangeInput {...args} onChange={setValue} value={value} />

With Description

WindowSelect a check-in and check-out date.

Choose Window

<DateRangeInput {...args} onChange={setValue} value={value} />

Sizes

Small

Choose Small

Medium

Choose Medium

Large

Choose Large

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  <DateRangeInput label="Small" onChange={setSm} size="sm" value={sm} />
  <DateRangeInput label="Medium" onChange={setMd} size="md" value={md} />
  <DateRangeInput label="Large" onChange={setLg} size="lg" value={lg} />
</div>

API

DateRangeInput

A date range picker input that opens a calendar popover for selecting a start and end date.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS class names applied to the input wrapper.
`data-testid`	`string`	—	Test ID applied to the input element.
`getIsDateDisabled`	`(date: PlainDate) => boolean`	—	Returns true for dates that should be disabled.
`description`	`ReactNode`	—	Supporting text rendered below the label.
`hasClear`	`boolean`	`false`	Whether to show a clear button when a value is selected.
`isDisabled`	`boolean`	`false`	Whether the input is disabled.
`isLabelHidden`	`boolean`	`false`	Whether to visually hide the label.
`isLoading`	`boolean`	`false`	Whether the input is in a loading state.
`label`*	`string`	—	Field label text.
`labelIcon`	`IconComponent`	—	Icon shown before the label.
`labelTooltip`	`ReactNode`	—	Tooltip content shown next to the label.
`max`	`PlainDate`	—	Maximum selectable date.
`min`	`PlainDate`	—	Minimum selectable date.
`numberOfMonths`	`1 \| 2`	`2`	Number of calendar months shown in the popover.
`onChange`*	`(value: DateRange \| null) => void`	—	Called when the selected date range changes.
`placeholder`	`string`	—	Placeholder text shown when no range is selected.
`ref`	`Ref<HTMLInputElement>`	—	Ref forwarded to the input element.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	Visual size of the input.
`status`	`InputStatus`	—	Validation status displayed below the input.
`style`	`CSSProperties`	—	Inline styles applied to the input wrapper.
`value`*	`DateRange \| null`	—	Currently selected date range. Pass `null` for an empty input.
`isOptional`	`false`	—
`isRequired`	`false`	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS class names applied to the input wrapper.
`data-testid`	`string`	—	Test ID applied to the input element.
`getIsDateDisabled`	`(date: PlainDate) => boolean`	—	Returns true for dates that should be disabled.
`description`	`ReactNode`	—	Supporting text rendered below the label.
`hasClear`	`boolean`	`false`	Whether to show a clear button when a value is selected.
`isDisabled`	`boolean`	`false`	Whether the input is disabled.
`isLabelHidden`	`boolean`	`false`	Whether to visually hide the label.
`isLoading`	`boolean`	`false`	Whether the input is in a loading state.
`label`*	`string`	—	Field label text.
`labelIcon`	`IconComponent`	—	Icon shown before the label.
`labelTooltip`	`ReactNode`	—	Tooltip content shown next to the label.
`max`	`PlainDate`	—	Maximum selectable date.
`min`	`PlainDate`	—	Minimum selectable date.
`numberOfMonths`	`1 \| 2`	`2`	Number of calendar months shown in the popover.
`onChange`*	`(value: DateRange \| null) => void`	—	Called when the selected date range changes.
`placeholder`	`string`	—	Placeholder text shown when no range is selected.
`ref`	`Ref<HTMLInputElement>`	—	Ref forwarded to the input element.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	Visual size of the input.
`status`	`InputStatus`	—	Validation status displayed below the input.
`style`	`CSSProperties`	—	Inline styles applied to the input wrapper.
`value`*	`DateRange \| null`	—	Currently selected date range. Pass `null` for an empty input.
`isOptional`*	`true`	—
`isRequired`	`false`	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS class names applied to the input wrapper.
`data-testid`	`string`	—	Test ID applied to the input element.
`getIsDateDisabled`	`(date: PlainDate) => boolean`	—	Returns true for dates that should be disabled.
`description`	`ReactNode`	—	Supporting text rendered below the label.
`hasClear`	`boolean`	`false`	Whether to show a clear button when a value is selected.
`isDisabled`	`boolean`	`false`	Whether the input is disabled.
`isLabelHidden`	`boolean`	`false`	Whether to visually hide the label.
`isLoading`	`boolean`	`false`	Whether the input is in a loading state.
`label`*	`string`	—	Field label text.
`labelIcon`	`IconComponent`	—	Icon shown before the label.
`labelTooltip`	`ReactNode`	—	Tooltip content shown next to the label.
`max`	`PlainDate`	—	Maximum selectable date.
`min`	`PlainDate`	—	Minimum selectable date.
`numberOfMonths`	`1 \| 2`	`2`	Number of calendar months shown in the popover.
`onChange`*	`(value: DateRange \| null) => void`	—	Called when the selected date range changes.
`placeholder`	`string`	—	Placeholder text shown when no range is selected.
`ref`	`Ref<HTMLInputElement>`	—	Ref forwarded to the input element.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	Visual size of the input.
`status`	`InputStatus`	—	Validation status displayed below the input.
`style`	`CSSProperties`	—	Inline styles applied to the input wrapper.
`value`*	`DateRange \| null`	—	Currently selected date range. Pass `null` for an empty input.
`isOptional`	`false`	—
`isRequired`*	`true`	—