Component

Date Picker

Text field + Popover-composed Calendar.

Basic

A single date field inside a form (birthdate, due date, booking date) where a full-time grid should stay hidden until needed.

A page where the date grid is the primary content and should always be visible - use Calendar directly.
Selecting a range of dates - not currently supported by either Calendar or Date Picker.

Key	Action
Enter / Space / ArrowDown	Opens the calendar popup from the text field.
Arrow keys (in the popup)	Same day/week/month navigation as Calendar.
Escape	Closes the popup and returns focus to the field.

Opens the same Popover-anchored Calendar as desktop rather than swapping to a native date input - keeps behavior and styling consistent across breakpoints.

The trigger is a real text field, so it's labeled the same way any other form field is (aria-label or a linked <label>).
Inherits Calendar's date-grid keyboard pattern and Popover's focus-return-to-trigger behavior once composed together.

Typing an unparseable date directly into the field with no format hint - pair it with a placeholder showing the expected format.

No typed-date parsing beyond what the field forwards - freeform typing isn't validated against a date format.

Criterion	Status	Note
Keyboard support	Supported	Opens via Enter/Space/ArrowDown; full Calendar keyboard pattern once open.
Focus management	Supported	Focus returns to the text field when the popup closes.
Screen reader labels	Partial	Requires an explicit aria-label or <label> on the field - not automatic.
Reduced motion	Supported	prefers-reduced-motion: reduce zeroes all Fuji transition durations globally.
Reduced transparency	Supported	prefers-reduced-transparency: reduce flattens Glass to opaque surfaces (portals included).
RTL layout	Partial	Logical flex/grid gap works under dir="rtl"; directional chevrons are not yet mirrored.

Prop	Type	Default	Description
value / defaultValue	Date \| null	None	Controlled or uncontrolled selected date.
onChange	(date: Date) => void	None	Fires when a day is picked in the popover.
minDate / maxDate	Date	None	Bounds of the selectable range.
placeholder	string	None	Trigger text shown when no date is set.
size	"sm" \| "md" \| "lg"	"md"	Trigger field height.
invalid / disabled	boolean	false	Field state.
locale	string	"en-US"	BCP-47 locale for the calendar labels.
className	string	None	Additional classes applied to the component root.

value / defaultValueNone

Date | null

Controlled or uncontrolled selected date.

onChangeNone

(date: Date) => void

Fires when a day is picked in the popover.

minDate / maxDateNone

Date

Bounds of the selectable range.

placeholderNone

string

Trigger text shown when no date is set.

size"md"

"sm" | "md" | "lg"

Trigger field height.

invalid / disabledfalse

boolean

Field state.

locale"en-US"

string

BCP-47 locale for the calendar labels.

classNameNone

string

Additional classes applied to the component root.