forms contract
DateRangePicker
Two-thumbed date selector. Defaults to two-month side-by-side calendar.
Variants
- default
- Two months side-by-side
- compact
- Single month — for narrow popovers
Sizes
- md
- lg
Slots
- presets
- Sidebar with shortcuts (Today, Last 7 days, This month, Custom)
Example
<DateRangePicker value={range} onChange={setRange} presets={['7d', '30d', 'mtd']} />Usage rule
Always include preset shortcuts (Today, Last 7 / 30 / 90 days, This month, Last month).
The full DateRangePicker contract has 3 more rules, plus the do-not patterns. Get the full recipe.