Date Picker

Category

Form Inputs

Built on

React DayPicker

Platforms

• ReactAvailable
• AngularNot implemented yet · advanced interaction wave· package preview
• SwiftUIAvailable
• Jetpack ComposeAvailable
• FlutterAvailable

›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

• Build✓verified
• Interaction—no evidence
• Accessibility✓verified
• RTL—no evidence
• Large text—no evidence
• Visual—no evidence
• Published✓verified

SwiftUI

Package maturity: stable · Implementation verification: Experimental

• Build✓verified
• Interaction—no evidence
• Accessibility—no evidence
• RTL—no evidence
• Large text—no evidence
• Visual—no evidence
• Published—no evidence

Jetpack Compose

Package maturity: stable · Implementation verification: Experimental

• Build✓verified
• Interaction—no evidence
• Accessibility—no evidence
• RTL—no evidence
• Large text—no evidence
• Visual—no evidence
• Published—no evidence

Flutter

Package maturity: stable · Implementation verification: Experimental

• Build✓verified
• Interaction—no evidence
• Accessibility—no evidence
• RTL—no evidence
• Large text—no evidence
• Visual—no evidence
• Published—no evidence

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

CLI

npx @kinetixui/cli add date-picker

Registry

/r/date-picker.json

A11y

audited in CI →

A text-field trigger + calendar popover, with label / helper text / error states. Composes Popover + Calendar.

Installation#

npx @kinetixui/cli add date-picker

Usage#

import { DatePicker } from "@kinetixui/ui";
 
<DatePicker
  label="Appointment date"
  value={date}
  onChange={setDate}
  helperText="Choose a weekday"
/>

For a range picker, compose Calendar mode="range" directly — see the Calendar docs.

Styled entirely from the KinetixUI token contract — bg-action, text-muted-foreground, border-input, ring-ring. Works in light and dark with no extra config. Keyboard and ARIA behaviour is inherited from Radix where the component is built on a primitive; the hand-built widgets (DataGrid, TreeView, ColorPicker, MultiSelect, Tour, KanbanBoard) have their own documented interaction models — see Accessibility.