build69
build69  /  Components  /  YearPicker /  Source

YearPicker

Single-YEAR picker: a Popover-anchored grid of years behind an outline button trigger, four to a row, twelve to a page, with prev/next paging and fromYear/toYear bounds. Shows พ.ศ. or ค.ศ. with the same era toggle chip as the calendar pickers, and the value it reports is ALWAYS the Common Era number (2026, never 2569) whichever era is on screen. Full keyboard grid (arrows, Home/End, PageUp/PageDown, roving tabindex). Works controlled (year/onYearChange) or uncontrolled (defaultYear).

Open docs← Back to catalog
3 files2 dependenciestokens resolved ✓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { surface, type Tone, type Emphasis } from "@/lib/recipes";

// YearPicker — Single-YEAR picker: a Popover-anchored grid of years behind an outline button trigger, f
export interface YearPickerProps extends React.ComponentProps<"div"> {
  /** Semantic role: which accent the component uses. */
  tone?: Tone;
  /** Visual loudness: how prominent it reads. */
  emphasis?: Emphasis;
}

export function YearPicker({
  className,
  tone = "primary",
  emphasis = "solid",
  ...props
}: YearPickerProps) {
  return (
    <div
      data-slot="year-picker"
      data-tone={tone}
      data-emphasis={emphasis}
      className={cn(
        "inline-flex items-center gap-2 rounded-lg transition-colors",
        surface(tone, emphasis),
        className,
      )}
      {...props}
    />
  );
}