forms contract
DatePicker
Calendar-based date selection. Trigger is an input + calendar icon; opens a popover with month grid.
Variants
- inline
- Calendar always visible — inside booking flows
- popover
- Trigger opens a calendar popover (default)
Sizes
- md
- 36pt trigger
- lg
- 44pt trigger
Slots
- footer
- Slot for Today / Clear shortcut buttons
Example
<DatePicker value={date} onChange={setDate} minDate={today} format="medium" />Usage rule
Date format respects user locale via Intl.DateTimeFormat — never hardcode MM/DD/YYYY.
The full DatePicker contract has 5 more rules, plus the do-not patterns. Get the full recipe.