Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA year with four quarter buttons that name their months, for financial reports, OKRs and planning, giving a YYYY-Qn value.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for quarterly periods: revenue reports, OKR cycles, planning. The value is YYYY-Qn; startOfQuarter and endOfQuarter in date-time-core turn it into dates.
For other periods use month-picker or year-picker.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | null | null | Quarter as YYYY-Qn. |
| onValueChange | (value: string | null) => void | - | Called with the chosen quarter. |
| min / max | string | - | Earliest and latest quarter. |
| showMonths | boolean | true | Show the months on each button. |
| defaultYear / locale / today / label | - | - | First year, locale, reference day, 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 of four cells; the spoken name includes the months ("Quarter 2 2026, Apr - Jun").aria-current="date".