Picker
Date Picker lets people choose a date, or a range of dates, from a calendar.
Preview
A calendar grid for one date. Use it when the shape of the month matters and a scrolling wheel would hide it. iOS: DatePicker, graphical style. Android: DatePicker.
Every number is the file's own: January 2026, the 16th selected, the 2nd, 12th, 17th and a spilled 3rd marked. Three parts at gap 16. Seven 36 cells and six 8 gaps fill exactly the 300 the padding leaves, so the card cannot shrink and the stage scrolls below 340. Monday takes one letter, the other six take two.
Date selector
The month header is its own private component, not part of the grid, and the only control in the card that changes what the grid shows.
A bg/weak-50 pill holding two 32 Compact Buttons at Style White, with a 14/20 Semi Bold month label filling the middle. The carets are filled vectors, not Lucide strokes, so they ignore the icon stroke variable. The main component sets radius 18 on a 44 pill; the instance in the picker overrides it to full, and that is what ships.
Day cell
The private target behind every number. Four states crossed with one boolean, eight variants, all of them a 36 circle.
Default has no fill, number on text/sub-700. Pressed takes bg/weak-50 and lifts it to text/strong-950. Active is brand/base under a static white number. Disabled is a spilled day from the next month. The dot is absolutely placed, so it never moves the number, and it recolours over Active and Disabled. In the second row, Pressed with Marked drops the number back to text/sub-700.
Properties
The published component has none at all. Every knob lives on a private block inside it.
Both cell and label carry a Type axis with exactly one option, so it is an axis that cannot vary. And the picker's own description sends you to the date selector for a compact inline choice, but that selector is _Date Selector, a private block marked not for direct use. Read the advice as a plan, not as something you can act on today.
Tokens
Every value the picker reads, resolved to its primitive.
In dark the selected cell is #2B7FFF under a static white number and its dot goes to #132150, a very dark blue on that blue. Legible, but only just, and the one pairing on this component worth checking on a real screen. Geometry runs on radius/3xl 32, radius/full, spacing/5 20, spacing/4 16 and spacing/2 8, with the card on dropShadow/2xl.
Guidelines
Let the dot mean one thing and say what it is. Something happens on that day, and the selected cell is the only thing carrying a fill.
Do not fill a run of cells to fake a range. This component chooses one date, and three filled circles read as three selections, not as one span.
Use the grid when the shape of the month is part of the decision: a weekend, a deadline near the end, a run of marked days. When the answer is just a date and the month is irrelevant, a wheel or a text field is faster and far smaller. There is no range variant here, no time and no year jump, so a booking flow that needs two dates needs two pickers or a different component.