Date Picker
A month grid for choosing a day, with arrows to step between months. Usually opens from a date field, and shows today and the chosen day at a glance.
Preview
Selected: 14 April 2026
When to use
- For dates close to now, where seeing the week and weekday helps: bookings, deadlines, schedules.
- For a range, where both ends are picked from the same grid.
Reach for something else
- For dates far from now, like a date of birth: three plain Inputs are faster to fill.
Anatomy
- 1
Header
Month and year, with previous and next buttons either side.
- 2
Weekday row
Short day names above the columns.
- 3
Day grid
Six rows of seven days; days outside the month are muted.
- 4
Today mark
A small dot or ring on today's date.
- 5
Selected day
Filled in the brand colour.
States
Default
The month of the selected day, or of today.
Hover
A soft wash on the day under the pointer.
Selected
The chosen day fills.
Outside month
Muted but still selectable, or hidden, by choice.
Disabled day
Struck through or muted and inert, for dates that cannot be picked.
Accessibility
- The grid is role="grid" with each day a gridcell; the arrow keys move a day or a week.
- Page Up and Page Down step the month; Home and End go to the start and end of the week.
- Each day has a full accessible name, such as Tuesday 14 April 2026, and the chosen one has aria-selected.
- The month heading is a live region, so changing month is announced.
Source
The Date Picker is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block