Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA year-at-a-glance grid of twelve months with year paging and min, max and unavailable months, giving a YYYY-MM value.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
Use it when the period is a month: a statement, a billing cycle, a monthly report. The value is YYYY-MM.
For a span of months use month-range-picker; for a day use calendar-grid.
import { MonthPicker } from "@/components/ui/month-picker"<MonthPicker
value={month}
onValueChange={setMonth}
max="2026-10"
labelWidth="short"
/>| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | null | null | Month as YYYY-MM. |
| onValueChange | (value: string | null) => void | - | Called with the chosen month. |
| defaultYear | number | year of value or today | Year shown first. |
| min / max | string | - | Earliest and latest YYYY-MM. |
| isMonthUnavailable | (month: string) => boolean | - | Disable single months. |
| labelWidth | short | long | short | Jan or January in the cell. |
| locale / today / label | - | - | Month names, reference month, accessible name. |
| Keys | Action |
|---|---|
| Arrow keys | Move between cells; Left and Right swap in right-to-left text, and moving past an edge changes the page |
| Home / End | First and last cell of the row |
| Page Up / Page Down | Previous or next page (year) |
| Enter / Space | Selects the focused cell |
grid named "Month, 2026" with one gridcell per month; the spoken name is the full month and year ("March 2026").aria-current="date"; disabled months are skipped by the pointer and marked in the DOM.Intl.DateTimeFormat.