Interaction
Date range
Native date fields and an accessible calendar, working in tandem.
Installation
Terminal
bunx shadcn@latest add https://ui.fabrials.com/r/date-range.jsonAPI
| Prop / export | Type | Description |
|---|---|---|
| value | {from: string; to: string} | Calendar dates in YYYY-MM-DD format. |
| onChange | (range) => void | Controlled selection. |
| min | string? | Earliest selectable date. |
| required | boolean | Require native date fields. |
Behavior & compatibility
Dates represent calendar days without timezone conversion. Validate the full range again in your action handler.
Accessibility
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is fully keyboard operable.