How to build an accessible DatePicker in React

The trigger is role="combobox" with aria-haspopup="dialog"/aria-expanded; the calendar is a role="dialog" containing a role="grid" with roving tabindex so arrow keys move a single focusable day, days expose aria-pressed for selection, aria-current="date" for today, and aria-disabled past min/max, and errors are wired via aria-invalid + aria-describedby with role="alert"

When to use a DatePicker

• Picking a single calendar date in a form where a visual month grid helps (due dates, bookings)
• Date entry that benefits from min/max constraints and locale-aware formatting and week start

When not to use it

• Selecting a time of day — use TimePicker
• Free-form or approximate dates where a plain Input is faster, or a date already known by typing

Keyboard interactions

Role combobox, verified at WCAG 2.2-AA.

• Enter
• Space
• Escape
• ArrowUp
• ArrowDown
• ArrowLeft
• ArrowRight

Common mistakes

Avoid: Passing a localized display string as value

Prefer: value/defaultValue/min/max are ISO YYYY-MM-DD; display formatting is handled internally

The component parses and compares ISO dates; non-ISO values break selection, constraints, and onChange

Example

<DatePicker label="Date" />

See the full DatePicker reference →