Date picker
An input whose trailing cell opens the calendar in a layer.
Publish on
States
-
Closed
aria-expanded="false"
The date on its rule and a resting chevron cell.
-
Open
aria-expanded="true"
The calendar in a framed layer; the chosen day is an ink cell.
Anatomy
| Trigger | the date as the site writes one (“October 2, 2026”) on a 40px field and its ink rule |
|---|---|
| Cell | a chevron cell at the rule’s end; open, it is switched on and breathes |
| Layer | paper and a 1px --ink frame, half a module of padding, half a module under the field |
| Calendar | the calendar specimen, whole |
| Choosing | a day closes the layer and focus returns to the field |
| Opening | the menu burn from where it was pressed, 300ms; reduced motion cuts |
Decisions
-
Two parts, already drawn
It is a field and a calendar in a layer: nothing new, so it reads as the parts it is made of.
-
The date in words
The value is written as the site writes dates in its labels and heroes, not as numbers to parse.
-
The one framed surface
The calendar is a layer over the page, so it keeps the 1px ink frame.