Forms
Date Picker
A field for picking a date from a calendar. It pairs a text field you can type into with a calendar you can move through by keyboard.
ReactVueWeb Components
View in Storybook Playground
Props
| Name | Type | Default | Description |
|---|---|---|---|
value | Temporal.PlainDate | null | — | Selected date (controlled). Pass `null` for "no selection". |
defaultValue | Temporal.PlainDate | null | — | Initial selected date (uncontrolled). @default null |
onChange | (date: Temporal.PlainDate | null) => void | — | Called with the new date (or `null` when cleared). |
min | PlainDateInput | — | Earliest selectable date (inclusive). ISO `YYYY-MM-DD` strings accepted. |
max | PlainDateInput | — | Latest selectable date (inclusive). ISO `YYYY-MM-DD` strings accepted. |
isDateDisabled | (date: Temporal.PlainDate) => boolean | — | Disable individual dates (e.g. weekends, holidays). |
locale | Intl.LocalesArgument | — | BCP-47 locale for month / weekday names. Defaults to the host locale. |
weekStartsOn | Weekday | — | Which weekday the grid starts on. @default 1 (Monday) |
disabled | boolean | — | Disable the whole control. |
invalid | boolean | — | Mark the field as invalid (combined with internal parse errors). |
alignEnd | boolean | false | Align the calendar popup to the field's end (right) edge. @default false |
placeholder | string | YYYY-MM-DD | Placeholder for the text field. @default 'YYYY-MM-DD' |
toggleLabel | string | Choose date | Accessible label for the calendar toggle button. @default 'Choose date' |
id | string | — | `id` for the text input (an auto-generated id is used otherwise). |
name | string | — | `name` for the text input, for form submission. |
required | boolean | — | Mark the field as required. |
inputProps | Omit< InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'required' | 'name' | 'id' > | — | Extra props forwarded to the text `<input>`. |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.