DateRangeInput

Start/end date field with segmented entry for both sides and a popover range calendar. The controlled value is a range object { start, end } of @internationalized/date values (typically CalendarDate), not two separate props.

Examples

Default

Seed both ends with defaultValue={{ start, end }}.

Trip

8102026

–

8202026

import { CalendarDate } from '@internationalized/date';
import { DateRangeInput } from '@var-ui/react';

<DateRangeInput
  label="Trip"
  defaultValue={{ start: new CalendarDate(2026, 8, 10), end: new CalendarDate(2026, 8, 20) }}
/>

Controlled range

Drive selection with value / onChange. onChange receives the full range (or null when cleared).

Trip

8102026

–

8202026

import { CalendarDate } from '@internationalized/date';
import { DateRangeInput } from '@var-ui/react';

<DateRangeInput
  label="Trip"
  value={{ start: new CalendarDate(2026, 8, 10), end: new CalendarDate(2026, 8, 20) }}
  onChange={setValue}
/>

Props

Accessibility

Built on React Aria DateRangePicker. Start and end each expose month/day/year spinbutton segments; the trigger opens a dialog with a range calendar grid. Keep label visible, and use description / errorMessage for helper and validation text announced with the field.

Props

Prop	Type	Default	Description
`className`	`(ClassNameOrFunction<DateRangePickerRenderProps> & string) \| undefined`	`'react-aria-DateRangePicker'`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
`description`	`string \| undefined`	—	Helper text shown below the control when there is no error.
`errorMessage`	`string \| undefined`	—	Validation message; when set, the field is shown in an error state.
`label`	`string \| undefined`	—	Field label rendered above the segmented start/end groups.

React Aria props

Prop	Type	Default	Description
`aria-describedby`	`string \| undefined`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string \| undefined`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	`string \| undefined`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string \| undefined`	—	Identifies the element (or elements) that labels the current element.
`autoFocus`	`boolean \| undefined`	—	Whether the element should receive focus on render.
`defaultValue`	`RangeValue<T> \| null \| undefined`	—	The default value (uncontrolled).
`dir`	`string \| undefined`	—	—
`form`	`string \| undefined`	—	The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
`hidden`	`boolean \| undefined`	—	—
`id`	`string \| undefined`	—	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`inert`	`boolean \| undefined`	—	—
`isDisabled`	`boolean \| undefined`	—	Whether the input is disabled.
`isInvalid`	`boolean \| undefined`	—	Whether the input value is invalid.
`isReadOnly`	`boolean \| undefined`	—	Whether the input can be selected but not changed by the user.
`isRequired`	`boolean \| undefined`	—	Whether user input is required on the input before form submission.
`lang`	`string \| undefined`	—	—
`onAnimationEnd`	`AnimationEventHandler<HTMLDivElement> \| undefined`	—	—
`onAnimationEndCapture`	`AnimationEventHandler<HTMLDivElement> \| undefined`	—	—
`onAnimationIteration`	`AnimationEventHandler<HTMLDivElement> \| undefined`	—	—
`onAnimationIterationCapture`	`AnimationEventHandler<HTMLDivElement> \| undefined`	—	—
`onAnimationStart`	`AnimationEventHandler<HTMLDivElement> \| undefined`	—	—
`onAnimationStartCapture`	`AnimationEventHandler<HTMLDivElement> \| undefined`	—	—
`onAuxClick`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onAuxClickCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onBlur`	`((e: FocusEvent<Element, Element>) => void) \| undefined`	—	Handler that is called when the element loses focus.
`onChange`	`((value: RangeValue<MappedDateValue<T>> \| null) => void) \| undefined`	—	Handler that is called when the value changes.
`onClick`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onClickCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onContextMenu`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onContextMenuCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onDoubleClick`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onDoubleClickCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onFocus`	`((e: FocusEvent<Element, Element>) => void) \| undefined`	—	Handler that is called when the element receives focus.
`onFocusChange`	`((isFocused: boolean) => void) \| undefined`	—	Handler that is called when the element's focus status changes.
`onGotPointerCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onGotPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onKeyDown`	`((e: KeyboardEvent) => void) \| undefined`	—	Handler that is called when a key is pressed.
`onKeyUp`	`((e: KeyboardEvent) => void) \| undefined`	—	Handler that is called when a key is released.
`onLostPointerCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onLostPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseDown`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseDownCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseEnter`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseLeave`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseMove`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseMoveCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseOut`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseOutCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseOver`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseOverCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseUp`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseUpCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerCancel`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerCancelCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerDown`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerDownCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerEnter`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerLeave`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerMove`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerMoveCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerOut`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerOutCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerOver`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerOverCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerUp`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerUpCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onScroll`	`UIEventHandler<HTMLDivElement> \| undefined`	—	—
`onScrollCapture`	`UIEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchCancel`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchCancelCapture`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchEnd`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchEndCapture`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchMove`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchMoveCapture`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchStart`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchStartCapture`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionCancel`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionCancelCapture`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionEnd`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionEndCapture`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionRun`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionRunCapture`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionStart`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionStartCapture`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onWheel`	`WheelEventHandler<HTMLDivElement> \| undefined`	—	—
`onWheelCapture`	`WheelEventHandler<HTMLDivElement> \| undefined`	—	—
`render`	`DOMRenderFunction<"div", DateRangePickerRenderProps> \| undefined`	—	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`slot`	`string \| null \| undefined`	—	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`style`	`StyleOrFunction<DateRangePickerRenderProps> \| undefined`	—	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
`translate`	`"yes" \| "no" \| undefined`	—	—
`validate`	`((value: RangeValue<MappedDateValue<T>>) => true \| ValidationError \| null \| undefined) \| undefined`	—	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
`validationBehavior`	`"native" \| "aria" \| undefined`	`'native'`	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
`value`	`RangeValue<T> \| null \| undefined`	—	The current value (controlled).

DOM props (17)

Prop	Type	Default	Description
`allowsNonContiguousRanges`	`boolean \| undefined`	—	When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
`defaultOpen`	`boolean \| undefined`	—	Whether the overlay is open by default (uncontrolled).
`endName`	`string \| undefined`	—	The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
`firstDayOfWeek`	`"sun" \| "mon" \| "tue" \| "wed" \| "thu" \| "fri" \| "sat" \| undefined`	—	The day that starts the week.
`granularity`	`Granularity \| undefined`	—	Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times.
`hideTimeZone`	`boolean \| undefined`	`false`	Whether to hide the time zone abbreviation.
`hourCycle`	`12 \| 24 \| undefined`	—	Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
`isDateUnavailable`	`((date: DateValue, anchorDate: CalendarDate \| null) => boolean) \| undefined`	—	Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
`isOpen`	`boolean \| undefined`	—	Whether the overlay is open by default (controlled).
`maxValue`	`DateValue \| null \| undefined`	—	The maximum allowed date that a user may select.
`minValue`	`DateValue \| null \| undefined`	—	The minimum allowed date that a user may select.
`onOpenChange`	`((isOpen: boolean) => void) \| undefined`	—	Handler that is called when the overlay's open state changes.
`pageBehavior`	`PageBehavior \| undefined`	`visible`	Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
`placeholderValue`	`T \| null \| undefined`	—	A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.
`shouldCloseOnSelect`	`boolean \| (() => boolean) \| undefined`	`true`	Determines whether the date picker popover should close automatically when a date is selected.
`shouldForceLeadingZeros`	`boolean \| undefined`	—	Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
`startName`	`string \| undefined`	—	The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).

Theme this component via createDesignTheme({ components: { dateRangeInput: … } }). See Customize for the full override API.

Public classes and data attributes from @var-ui/core dateRangeInput().

root

Name	Example	Description
`class`	`var-ui-dateRangeInput`	Root / part class name

label

Name	Example	Description
`class`	`var-ui-dateRangeInput__label`	Root / part class name

description

Name	Example	Description
`class`	`var-ui-dateRangeInput__description`	Root / part class name

error

Name	Example	Description
`class`	`var-ui-dateRangeInput__error`	Root / part class name

group

Name	Example	Description
`class`	`var-ui-dateRangeInput__group`	Root / part class name

segment

Name	Example	Description
`class`	`var-ui-dateRangeInput__segment`	Root / part class name

separator

Name	Example	Description
`class`	`var-ui-dateRangeInput__separator`	Root / part class name

trigger

Name	Example	Description
`class`	`var-ui-dateRangeInput__trigger`	Root / part class name

Name	Example	Description
`class`	`var-ui-dateRangeInput__popover`	Root / part class name

calendarHeader

Name	Example	Description
`class`	`var-ui-dateRangeInput__calendarHeader`	Root / part class name

calendarHeading

Name	Example	Description
`class`	`var-ui-dateRangeInput__calendarHeading`	Root / part class name

calendarNavButton

Name	Example	Description
`class`	`var-ui-dateRangeInput__calendarNavButton`	Root / part class name

calendarGrid

Name	Example	Description
`class`	`var-ui-dateRangeInput__calendarGrid`	Root / part class name

calendarHeaderCell

Name	Example	Description
`class`	`var-ui-dateRangeInput__calendarHeaderCell`	Root / part class name

calendarCell

Name	Example	Description
`class`	`var-ui-dateRangeInput__calendarCell`	Root / part class name

Apply via `recipeProps(recipe(…))` or copy the class / data attributes onto your markup.