UI component
DatePicker
DatePicker gives you a calendar-driven date field with controlled value updates, helper text, and optional range boundaries.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { DatePicker } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
Choose a start date
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| name | Keeps the field identifiable in form-level change handling. |
| value | Controls the selected date from your page or form state. |
| onChange | Receives the updated field name and value when a date is picked. |
| label, helperText, and error | Adds the copy users need before and after they make a selection. |
| startMonth and endMonth | Limits the visible calendar range when your flow only allows a specific window. |
| open and onOpenChange | Lets parent state fully control the popover when needed. |
Accessibility
The trigger and calendar use keyboard-friendly popover behavior, and validation state is surfaced with the expected invalid field messaging.
Optional access rules
Optional access props let the field stay hidden when unavailable or visible but disabled when it should be read only.