YearPicker

<div class="ui-year">
  <button type="button" class="ui-year__trigger field-control" role="combobox"
    aria-haspopup="dialog" aria-expanded="false" aria-labelledby="year-label">
    <span class="ui-icon ui-icon--calendar ui-year__calendar" aria-hidden="true"></span>
    <span class="ui-year__value">2022</span>
    <span class="ui-icon ui-icon--chevron-down ui-year__chevron" aria-hidden="true"></span>
  </button>
</div>
<!-- Panel: .ui-year__panel[role=dialog] with yearbar + year cells -->

import { YearPicker } from 'caustica-design/core'
import 'caustica-design/css'

<YearPicker
  value={year}
  onChange={setYear}
  placeholder="Choose year"
  panelLabel="Choose year"
  prevYearsLabel="Earlier years"
  nextYearsLabel="Later years"
  aria-labelledby="year-label"
/>