Forms
Month Picker
A month picker that chooses a Temporal.PlainYearMonth from a twelve-month grid. Arrow keys move the focus, Enter selects, and the prev and next buttons step the year.
ReactVueWeb Components
View in Storybook Playground
Examples
<MonthPicker
defaultValue={Temporal.PlainYearMonth.from('2026-05')}
onChange={setMonth}
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
value | Temporal.PlainYearMonth | null | — | Selected month (controlled). Pass `null` for "no selection". |
defaultValue | Temporal.PlainYearMonth | null | — | Initial month (uncontrolled). @default null |
onChange | (value: Temporal.PlainYearMonth | null) => void | — | Called with the new month (or `null` when cleared). |
min | PlainYearMonthInput | — | Earliest selectable month (inclusive). ISO `YYYY-MM` strings accepted. |
max | PlainYearMonthInput | — | Latest selectable month (inclusive). ISO `YYYY-MM` strings accepted. |
locale | Intl.LocalesArgument | — | BCP-47 locale for month names. Defaults to the host locale. |
disabled | boolean | — | Disable the whole control. |
size | Extract<SizeToken, 'sm' | 'md' | 'lg'> | md | Control size. @default 'md' |
alignEnd | boolean | false | Align the popup to the trigger's end (right) edge. @default false |
toggleLabel | string | Choose month | Accessible label for the trigger when no month is chosen. @default 'Choose month' |
id | string | — | `id` for the trigger button (an auto-generated id is used otherwise). |
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.