EnterUI
DocsComponentsThemesExamplesDonation
Get Started
    • MonthPicker
    • YearPicker
    • DateTimePicker

Default usage

  1. EnterUI
  2. /Docs
  3. /Scheduling
  4. /Month and Time
  5. /YearPicker
Updated 3 October 2026

YearPicker

Year grid with decade navigation for archive filters and historical ranges.

YearPicker renders a 12-cell grid of consecutive years with decade-step navigation. Use it for archive filters or financial-year selectors where day or month precision isn't needed.

#Default usage

Year grid

Selecting a cell emits a numeric year.

2016 – 2027
Code
<YearPicker aria-label="Reporting year" defaultValue={2026} />

#Import

Code
import { YearPicker } from "@froggdesign/enter-ui-react";

#Accessibility

YearPicker is a role="group" containing button cells. Each cell uses aria-pressed to indicate selection; navigation buttons have explicit aria-labels.

#API

  • value / defaultValue: numeric year.
  • onValueChange(value): fires when a year is committed.
  • min / max: numeric bounds; out-of-range cells are disabled.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousMonthPicker
NextDateTimePicker
On this page
  • Default usage
  • Import
  • Accessibility
  • API
  • Styling