Theme
Date picker
A date, typed segment by segment or picked from a calendar.
Examples
Props
DatePicker
A date, typed segment by segment or picked from a calendar. Segments step with the arrow keys; the order and format follow the reader's locale.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | The visible label. Every field has one; it names the field for screen readers too. Text, so it can also be the field's aria-label: see `useFallbackName`. |
description? | ReactNode | — | Help shown under the field and read with it. |
errorMessage? | ReactNode | ((validation: ValidationResult) => ReactNode) | — | Shown when the field is invalid; defaults to the browser's validation message. |
Also takes 109 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| ArrowUp or ArrowDown | Steps the focused segment |
| ArrowLeft or ArrowRight | Moves between segments |
| Type digits | Sets the focused segment |
| Alt + ArrowDown | Opens the calendar |
| Arrow keys (calendar) | Move by day and week |
| PageUp or PageDown (calendar) | Move by month |
Accessibility
- The label is required and is the field's accessible name; the description and error are linked with aria-describedby.
- Invalid fields are marked aria-invalid, and the error is announced when it appears.
- The border meets 3:1 against every surface (borderControl), and text 4.5:1, in every theme.
- Segment order, separators and the calendar follow the reader's locale and calendar system.
Browser support
It reads today's date to mark it in the calendar. Under Next.js cache components, render it inside Suspense so the prerender does not freeze the date; the fallback is shown until it hydrates.