/// Inputs

YearPicker

Inline grid of years paged a decade at a time, with full arrow-key selection, returning the chosen year as a number.

import { YearPicker } from "@protocore/pds";

View as Markdown

Basics

Twelve years fill a 4×3 grid under a range header; the chevrons page the view by a decade. Selecting a year emits a number. Controllable via value / defaultValue / onValueChange plus a controllable pageStart.

2016–2027

Bounded range

Pass min / max to disable years outside the valid window — disabled cells stay keyboard-reachable but can't be selected.

2016–2027

When to use it

Use YearPicker when only the year matters — a founding year, a model year, a tax year. It shares its grid engine with MonthPicker. When a month within the year matters use MonthPicker; for a specific day use DatePicker or Calendar.

Usage

Read the emitted `number` directly — the value is a plain year.
Set `min` / `max` to disable years outside the selectable window.
Set `defaultPageStart` to land the view near the likely choice.
Wrap it in a `Field` when it needs a visible label.

Don't

Don't use it when a month or day is part of the answer — step up to MonthPicker or Calendar.
Don't infer the choice from the visible page range — read `onValueChange`.
Don't hand it into a popover expecting a trigger; it renders inline.
Don't rely on colour alone — the selected cell also inverts its fill.

Accessibility

Keys	Action
`Arrow keys`	Move between year cells (clamped to the grid).
`Home / End`	Jump to the first / last year on the page.
`Enter / Space`	Select the focused year.

The year cells form a `role="grid"` with `role="row"` groupings and roving tabindex, so only one cell is in the tab order.
Each cell carries an `aria-label` of its year and `aria-selected` when chosen.
The range header exposes labelled Previous / Next buttons and an `aria-live` range readout.

`YearPicker` props

Prop	Type	Default	Description
`className`	`string`	—
`defaultPageStart`	`number`	—	Initial first year of the visible page in uncontrolled mode.
`defaultValue`	`number \| null`	—	Initial selected year in uncontrolled mode.
`max`	`number`	—	Latest selectable year (inclusive).
`min`	`number`	—	Earliest selectable year (inclusive).
`onPageStartChange`	`((pageStart: number) => void)`	—	Fires when the visible page changes.
`onValueChange`	`((value: number) => void)`	—	Fires with the chosen year.
`pageStart`	`number`	—	Controlled first year of the visible page.
`style`	`CSSProperties`	—
`value`	`number \| null`	—	Controlled selected year.