forms contract

DatePicker

Calendar-based date selection. Trigger is an input + calendar icon; opens a popover with month grid.

Variants

  • inline
  • popover

Sizes

  • md
  • lg

Slots

  • footer

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.

Get the DatePicker contract in your project.