Agents / Interaction
Date range
Native date fields and an accessible calendar, working in tandem.
Registry
Installation
Add the registry entry to your app.
npx shadcn@latest add @fabrials/date-rangeWithout the named registry, use the address:
https://ui.fabrials.com/r/date-range.json
API reference
| 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
Dates represent calendar days without timezone conversion. Validate the full range again in your action handler.
Accessibility
Keyboard and contrast
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 keyboard operable.