DatePicker

An accessible date-picker with a calendar popover.

Category: inputs · WCAG 2.2-AA · date, calendar, picker, input, form

Sizes

Prop	Type	Default	Description
`id`	`string`	—	Base id for the input and its popover/aria wiring; auto-generated when omitted.
`value`	`string`	—	Controlled ISO date value (YYYY-MM-DD)
`defaultValue`	`string`	—	Uncontrolled default value
`onValueChange`	`(value: string \| undefined) => void`	—	Called with the selected ISO date string (or undefined when cleared)
`onChange`	`(value: string \| undefined) => void`	—	Deprecated: use onValueChange (same ISO string \| undefined)
`min`	`string`	—	Minimum ISO date
`max`	`string`	—	Maximum ISO date
`clearable`	`boolean`	`false`	Shows a clear button
`label`	`string`	—	Field label
`hint`	`string`	—	Hint text
`error`	`string`	—	Error message
`size`	`'sm' \| 'md' \| 'lg'`	`md`	Field size
`disabled`	`boolean`	`false`	Disables the picker
`labels`	`DatePickerLabels`	—	i18n label overrides

Picking a single calendar date in a form where a visual month grid helps (due dates, bookings)
Date entry that benefits from min/max constraints and locale-aware formatting and week start

Selecting a time of day — use TimePicker
Free-form or approximate dates where a plain Input is faster, or a date already known by typing

Uncontrolled date picker

<DatePicker label="Date" />

With clear button

<DatePicker label="Date" clearable />

Date range constraint

<DatePicker min="2024-01-01" max="2024-12-31" />