Date Picker
Choose a single date in context, with native form validation and reset.
Interactive preview
Installation
Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.
npx antiflex-ui@0.1.0-alpha.2 add date-pickerThis site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.
Usage
<Field label="Review date">
<DatePicker label="Review date" name="reviewDate" required
value={date} onValueChange={setDate}
min="2026-10-01" max="2027-12-31" />
</Field>API reference
All components forward native attributes, className, and refs to their underlying elements.
| Prop | Type | Default |
|---|---|---|
label | string | required |
value / defaultValue / onValueChange | YYYY-MM-DD / (string) => void | '' |
open / defaultOpen / onOpenChange | boolean / boolean / (boolean) => void | false |
min / max / isDateDisabled | ISO bounds / predicate | optional |
locale / weekStartsOn / today | Intl locale / 0–6 / ISO date | en-US / 0 / UTC today |
name / form / required / disabled / readOnly / clearable | native form contracts / boolean | optional / false / true (clearable) |
Accessibility
A labeled button opens a non-modal Popover containing the original Calendar. Initial focus targets its active date; Escape/Cancel closes and returns focus, and selecting a day commits the YYYY-MM-DD value. Focus is not trapped; put the entire picker inside an active modal when composing there. Native date input submission handles name/form, min/max, required validation and uncontrolled reset; the visible trigger receives invalid focus and an error message. Clear date commits an empty value; required validation still applies. Controlled value/open remain consumer-owned. Ref/native button attributes target the trigger; label is required and its accessible name includes a formatted selected date. Locale formats labels, not submitted ISO values. Single dates only; no text-entry parser, date ranges or alternative calendar engine.