Components

YearPicker

A field that chooses a year from a page of twelve years.

Storybook: Storybook
Source: Source

When to use

To choose an annual report, fiscal year or tax period.
Wherever only the year matters.

When not to use

When the day matters too: use DatePicker.
When the month matters too: use MonthPicker.
When there are few fixed options: use Select.

Anatomy

Label: the Field label.
Trigger: a button that shows the value or the placeholder and a calendar icon.
Header: The year range, such as 2016 – 2027, with the previous and next page buttons.
Grid: twelve cells in three columns. The year.

Behaviour

The grid opens on the page of the chosen year, or the current one; focus is on the chosen or current cell.
Arrow keys move to the previous or next page at the page edge.
Choosing a cell closes the grid and returns focus to the trigger.
Cells outside min and max cannot be chosen.
With name, a hidden input submits the value as YYYY.

Guidelines

Limit the range with min and max, and state the range in the help text.
Do not use both DatePicker and YearPicker for the same period in one form.

Content

The label says what the year is for: “Fiscal year”, “Report year”.
Years are written in the Provider language, without a thousands separator.

DatePicker: day, month and year.
MonthPicker: month and year.
DateRangePicker: a date range.