Skip to main content

Date Picker

Calendar dialog with arrow-key grid navigation, Today/Clear actions, focus return, and aria-live month label.

Empty & clearable

Arrow keys in calendar. Enter to confirm.

With value

Min / max

Error

Disabled

Native

Empty

With value

Min / max

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme for the field group.
modeOptional"light" | "dark"lightColor mode — swaps token palette for light or dark surfaces.
variantOptional"native" | "custom"customCustom calendar popover (default). Pass variant="native" for a styled `<input type="date">` when you need native picker semantics.
value / onChangeOptionalstring (yyyy-MM-dd)Controlled ISO date string.
min / maxOptionalstring (yyyy-MM-dd)Selectable date range.
required, name, disabledOptionalform attrsForm integration; hidden input when name is set.
clearableOptionalbooleanShows Clear action when a date is selected.
placeholderOptionalstringPick a dateEmpty state label on trigger.