Twenty-one variants across three components: the field in fifteen, the bare trigger in three, and a time field in three. The calendar itself stays a separate...
Three components, twenty-one variants
Date Picker - State × Type: Default · Hover · Focus · Active · Disabled × Icon Left · Icon Right · With Input
Time Picker - State: Default · Focus · Disabled - 150 × 32, no Hover
Using the Date Picker
Why does With Input look the same in Hover and Active?
Because the field does not tint, only its trailing 24px button does. Icon Left and Icon Right fill the whole 212px shell with base.muted on hover, since the whole shell is the button. With Input is a field you type into, so tinting it on hover would promise something it does not do.
Why is the focus ring 3px here?
It is the only place in the kit that uses 3px; everything else focuses at 2px. Time Picker matches it, so the two date controls are consistent with each other but a pixel heavier than an Input sitting beside them. Worth knowing when you line a form up.
Where is the calendar?
Published separately, and the usage frame drops a real Calendar / Basic instance under the open trigger rather than drawing a picture of one. That is the point of keeping them apart: a date field, a range field and a booking widget can all open the same calendar without any of them owning a copy.
Why does Time Picker have no Hover?
There is nothing to press. It is a value you type, so the file draws it at rest, focused, and disabled. Disabled also takes the value itself down to base.muted-foreground, which the date field does not do: the date field only drops the whole shell to half.
Is the calendar showing a real January 2025?
Yes. The 1st sits under Wednesday, which is where it fell in 2025, and the grid comes from the Calendar page rather than being overridden here. That matters more than it sounds: a date grid whose weekdays do not line up is the one thing every reader checks, and an instance that overrides its calendar stops following the component it came from.