Component

Date picker

Single-date picker with calendar panel, month navigation, min/max bounds, and controlled value support.

Date picker is intentionally dependency-free for v1: ISO date strings at the boundary, product-local formatting outside the component when needed.
form
Date pickerDefault
Locks the evaluation start before routing begins.

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

Every state maps to the same component render route through the state query param.

Default

Dense date fields in a run scheduling flow.
Locks the evaluation start before routing begins.

Open

Calendar popdown with selected day.
April 2026
MonTueWedThuFriSatSun
Open calendar keeps selected, muted, and bounded days visible.

Bounded

Date picker with unavailable days.
Only this sprint window is available.

Success

Accepted date with success feedback.
Review window confirmed.

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
valueDateValue-Controlled ISO date string.
defaultValueDateValuetodayUncontrolled initial ISO date string.
defaultOpenbooleanfalseInitial calendar popdown state.
minDateValue-Minimum selectable ISO date.
maxDateValue-Maximum selectable ISO date.
onValueChange(value: DateValue) => void-Receives the selected ISO date.
labelReactNode-Field label.