DatePicker
A date field that opens a Calendar: type the date, or pick it from the month grid.
Select a date
Usage
Import the component and render it.
import { DatePicker } from 'src/components/DatePicker/DatePicker';
<DatePicker size="sm" label="Date" helperText="Select a date" today="2026-10-01" />Accessibility
Role: combobox field (aria-haspopup="dialog", aria-expanded) that opens a dialog with the Calendar (WAI-ARIA date picker combobox).
| Key | Action |
|---|---|
| ↓ (in the field) | Opens the Calendar and moves focus into the grid |
| Typing | Enters the date as MM / DD / YYYY; Enter or leaving the field applies it |
| Calendar keys | Arrows, Home/End, Page Up/Down, Enter (see Calendar) |
| Escape | Closes the Calendar and returns focus to the field |
- The trailing icon is decorative: the field itself opens the Calendar.
- Choosing a date fills the field, closes the Calendar and returns focus to the field.
Size
Set the size prop: Small is "sm", Medium is "md".
Select a date
Select a date
<DatePicker size="sm" />
<DatePicker size="md" />Calendar
Set the open prop: Closed is {false}, Open is {true}.
Select a date
Select a date
October 2026
| SUN | MON | TUE | WED | THU | FRI | SAT |
|---|---|---|---|---|---|---|
<DatePicker />
<DatePicker open />States
Disabled comes from the disabled prop; Error from the error prop. Hover and Focus follow the pointer and the keyboard: try them in the playground.
Select a date
Select a date
Select a date
<DatePicker disabled />
<DatePicker error />Composition
Use the following composition to build a DatePicker:
DatePicker
├── Input
└── CalendarActions
Pass callbacks to respond to the component.
import { DatePicker } from 'src/components/DatePicker/DatePicker';
<DatePicker
size="sm"
label="Date"
helperText="Select a date"
today="2026-10-01"
onOpenChange={(open) => console.log(open)}
onValueChange={(value) => console.log(value)}
/>| Callback | When |
|---|---|
onOpenChange | Called when the Calendar opens or closes. |
onValueChange | Called with the picked date, or a typed one that is complete and valid (on Enter or blur). |