Forms
Calendar
An inline month grid for picking a date, with no popup. Each day is a button, and the chosen day shows in color.
ReactVueWeb Components
View in Storybook Playground
Examples
<Calendar defaultValue={today()} onChange={setDate} locale="ja-JP" />Props
| Name | Type | Default | Description |
|---|---|---|---|
value | Temporal.PlainDate | null | — | Selected date (controlled). |
defaultValue | Temporal.PlainDate | null | — | Initial selection (uncontrolled). @default null |
onChange | (date: Temporal.PlainDate) => void | — | Called with the newly selected date. |
min | PlainDateInput | — | Earliest selectable date. |
max | PlainDateInput | — | Latest selectable date. |
isDateDisabled | (date: Temporal.PlainDate) => boolean | — | Disable individual dates. |
locale | Intl.LocalesArgument | — | Locale for month/weekday names. |
weekStartsOn | Weekday | — | Which weekday the grid starts on. @default 1 (Monday) |
aria-label | string | Calendar | Accessible label for the grid. @default 'Calendar' |
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.