Date Range Input

Category: Form Inputs
Status: beta— new this release, what that means →
Platforms: ReactAvailable
AngularNot implemented yet · data display wave· package preview
SwiftUIComposition
Jetpack ComposeComposition
FlutterComposition
Verification details
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
Buildverified
Interactionverified
Accessibilityverified
RTLverified
Large textverified
Visualno evidence
Publishedverified
This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.
Install: ReactReact Setup →
npx @kinetixui/cli add date-range-inputnpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm @kinetixui/tokens on npm
The CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Angular · previewAngular Setup →
Not implemented yet · data display wave.
SwiftUISwiftUI Setup →
Composition · KinetixUI ships no SwiftUI component for this.
Jetpack ComposeJetpack Compose Setup →
Composition · KinetixUI ships no Jetpack Compose component for this.
FlutterFlutter Setup →
Composition · KinetixUI ships no Flutter component for this.
Registry: /r/date-range-input.json
A11y: React: audited in CI →

A start and end calendar date in one field, from Calendar in range mode in a Popover, with ISO date strings instead of Date instants so no time zone can move a booking.

Reduced motion: off · your browser setting

Stay

React installation#

npx @kinetixui/cli add date-range-input

React usage#

import { DateRangeInput } from "@kinetixui/ui";
 
const [stay, setStay] = React.useState({ start: "2026-03-12", end: "2026-03-15" });
 
<DateRangeInput
  label="Dates"
  value={stay}
  onValueChange={setStay}
  min="2026-03-01"
  isDateDisabled={(iso) => soldOut.has(iso)}
  locale="en-GB"
/>

Calendar dates, not instants. The value is ISO YYYY-MM-DD strings, so a check-in date stays the same day in every time zone: nothing is converted. If your API needs a timestamp, build it on the server with the property's own time zone.

The first click sets the start and leaves the end open; the second sets the end; the panel closes when the range is complete. Clicking the start again makes a one-day range.
min, max and isDateDisabled bound what can be chosen. formatDate and locale control how the trigger writes dates.
Built on Calendar in range mode inside a Popover. It is not a second calendar.

Accessibility and RTL#

The trigger's name is the label plus the chosen range; each date is its own <bdi> run so mixed-direction dates keep their order.
Inside the panel, Calendar's grid keyboard model applies. Under RTL (inside KinetixDirectionProvider), the previous/next chevrons and arrow keys mirror.
Checked in jsdom and Chromium; no screen reader run.

React API

The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.

This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.

DateRangeInput

Form InputsDate Picker Form InputsField

Date Range Input

Category

Form Inputs

Status

beta— new this release, what that means →

Platforms

ReactAvailable
AngularNot implemented yet · data display wave· package preview
SwiftUIComposition
Jetpack ComposeComposition
FlutterComposition

Verification details

What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.

React

Package maturity: stable · Implementation verification: Beta

Buildverified
Interactionverified
Accessibilityverified
RTLverified
Large textverified
Visualno evidence
Publishedverified

This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.

Install

ReactReact Setup →
npx @kinetixui/cli add date-range-inputnpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm @kinetixui/tokens on npm
The CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Angular · previewAngular Setup →
Not implemented yet · data display wave.
SwiftUISwiftUI Setup →
Composition · KinetixUI ships no SwiftUI component for this.
Jetpack ComposeJetpack Compose Setup →
Composition · KinetixUI ships no Jetpack Compose component for this.
FlutterFlutter Setup →
Composition · KinetixUI ships no Flutter component for this.

Registry

/r/date-range-input.json

A11y

React: audited in CI →

A start and end calendar date in one field, from Calendar in range mode in a Popover, with ISO date strings instead of Date instants so no time zone can move a booking.

Reduced motion: off · your browser setting

Stay

React usage#

import { DateRangeInput } from "@kinetixui/ui";
 
const [stay, setStay] = React.useState({ start: "2026-03-12", end: "2026-03-15" });
 
<DateRangeInput
  label="Dates"
  value={stay}
  onValueChange={setStay}
  min="2026-03-01"
  isDateDisabled={(iso) => soldOut.has(iso)}
  locale="en-GB"
/>

The first click sets the start and leaves the end open; the second sets the end; the panel closes when the range is complete. Clicking the start again makes a one-day range.

min, max and isDateDisabled bound what can be chosen. formatDate and locale control how the trigger writes dates.

Built on Calendar in range mode inside a Popover. It is not a second calendar.

Accessibility and RTL#

The trigger's name is the label plus the chosen range; each date is its own <bdi> run so mixed-direction dates keep their order.

Inside the panel, Calendar's grid keyboard model applies. Under RTL (inside KinetixDirectionProvider), the previous/next chevrons and arrow keys mirror.

Checked in jsdom and Chromium; no screen reader run.

React API

The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.

DateRangeInput

Prop	Type	Notes
labelrequired	React.ReactNode
valuerequired	DateRangeValue
onValueChangerequired	(value: DateRangeValue) => void
min	stringEarliest selectable date, inclusive.	Earliest selectable date, inclusive.
max	stringLatest selectable date, inclusive.	Latest selectable date, inclusive.
isDateDisabled	((iso: string) => boolean)Return true for a date that cannot be chosen.	Return true for a date that cannot be chosen.
locale	stringBCP 47 locale for the default display format.	BCP 47 locale for the default display format.
formatDate	((iso: string) => string)Replaces the default `Intl.DateTimeFormat` display of one date.	Replaces the default `Intl.DateTimeFormat` display of one date.
placeholder	stringTrigger text with no selection. Default "Select dates".	Trigger text with no selection. Default "Select dates".
openEndLabel	stringShown in place of a missing end date. Default "…".	Shown in place of a missing end date. Default "…".
numberOfMonths	numberMonths shown side by side. Default 1.	Months shown side by side. Default 1.
disabled	boolean
invalid	booleanMarks the trigger invalid; pair it with a visible message referenced by `aria-describedby`.	Marks the trigger invalid; pair it with a visible message referenced by `aria-describedby`.
aria-describedby	string
className	string
calendarProps	Omit<DayPickerProps, "onSelect" \| "disabled" \| "selected" \| "required" \| "mode" \| "numberOfMonths" \| "excludeDisabled">Passed to the Calendar, e.g. `weekStartsOn`. Selection props are owned by this component.	Passed to the Calendar, e.g. `weekStartsOn`. Selection props are owned by this component.