Form controls

DatePicker

A text trigger that opens a calendar popover. Binds the value as an ISO date string (YYYY-MM-DD): pure local-date math, no timezone surprises.

Basic

Due date

With bounds and a hint

Departure

Trips must be booked at least 7 days out.

Under a touch screen

Every day takes a 44px target of its own. The calendar opens 320px wide there, 48px wider than under a mouse, which a phone of that width holds edge to edge, and its weeks sit 12px apart, so a tap near the edge of a day never picks the day beside or below it.

A calendar that would run past the side of the screen, or of the dialog or scrolling box it opens in, first aligns with its field's other edge, and when that does not fit either, slides back inside it with an 8px gap. In a container too short for it above and below, such as a one-field Modal, it opens below its field with its whole grid, and the container grows to hold it or scrolls down to it.

API

Prop	Type	Default	Description
`value`	`string`	`''`	Bindable ISO date (YYYY-MM-DD).
`label`	`string`	no default	Field label.
`placeholder`	`string`	`'Choose a date'`	Shown when no value is set.
`min`	`string (ISO date)`	no default	Earliest selectable date.
`max`	`string (ISO date)`	no default	Latest selectable date.
`hint`	`string`	no default	Subdued hint below the field.
`error`	`string`	no default	Error message. Reddens the border.
`disabled`	`boolean`	`false`	Disable the trigger.
`required`	`boolean`	`false`	Mark as required for form validation.
`id`	`string`	no default	DOM id of the trigger button.
`onchange`	`(value: string) => void`	no default	Fires when a day is picked.
`class`	`string`	no default	Extra classes on the wrapper.
`noAI`	`boolean`	`false`	Keep the value from an assistant: a FormAssist never reports it or fills it, and the control is marked data-no-ai for a browser agent.
`name`	`string`	no default	Posts the day with the surrounding form, through a hidden input.