Dates@knitui/dates
YearLevelGroup
YearLevelGroup renders numberOfColumns YearLevel panels side by side inside a LevelsGroup, stepping one year per column over a month grid. It is the month-grid analogue of MonthLevelGroup/DecadeLevelGroup and wires cross-platform arrow-key roving focus across every panel. Only the edge panels show navigation controls: withPrevious on the first, withNext on the last. It owns no cells of its own — sizing, colors and interaction live downstream in YearLevel/MonthsList/PickerControl; per-month customization flows through the getMonthControlProps callback.
import { YearLevelGroup } from "@knitui/dates";Playground
Loading playground…
<YearLevelGroup
year="2024-03-15"
/>Examples
Default
A single year panel (the default).
Loading example…
Two Columns
Two years side by side — one year apart, edge-only navigation controls.
Loading example…
Large
Larger cells via the shared size ladder.
Loading example…
Full Width
Stretched to the full width of its container.
Loading example…
Custom Label Format
A custom year label format via dayjs tokens.
Loading example…
Bounded
Bounded by minDate/maxDate: the previous/next controls disable at the bounds and out-of-range month cells are disabled (delegated to MonthsList).
Loading example…
Per Month Props
Per-month customization via getMonthControlProps — the "explicit per-item beats sugar" callback (#7), forwarded to every panel. Here it disables June.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
year required | string | 2024-03-15 | Year of the first (left-most) panel, any date within it (`YYYY-MM-DD`). |
disabled system | boolean | undefined | — | — |
fullWidth system | boolean | undefined | false | Stretch the group (and its panels) to the full width of its container. |
getMonthControlProps | ((date: DateStringValue) => Partial<PickerControlProps>) | undefined | — | Passes props down to each month `PickerControl`, keyed by date (wins over `styles.control`). |
hasNextLevel | boolean | undefined | true | Whether the level button can zoom out to the next level. |
headerControlsOrder | CalendarHeaderControlName[] | undefined | ['previous', 'level', 'next'] | Order in which the controls are rendered. |
levelControlAriaLabel | string | ((year: DateStringValue) => string) | undefined | — | Level control `aria-label`, or a function resolving it from each panel's year. |
locale | string | undefined | — | dayjs locale; falls back to the value defined in `DatesProvider`. |
maxDate | string | Date | undefined | — | Maximum possible date in `YYYY-MM-DD` format or a `Date` object. |
minDate | string | Date | undefined | — | Minimum possible date in `YYYY-MM-DD` format or a `Date` object. |
monthsListFormat | string | undefined | 'MMM' | dayjs format for the month labels. |
nextDisabled | boolean | undefined | false | Disables the next control. |
nextIcon | ReactNode | — | Replace the next-button icon. |
nextLabel | string | undefined | — | Next button `aria-label`. |
numberOfColumns | number | undefined | 1 | Number of year panels to display next to each other. |
onLevelClick | (() => void) | undefined | — | Called when the level button is pressed. |
onNext | (() => void) | undefined | — | Called when the next button is pressed. |
onPrevious | (() => void) | undefined | — | Called when the previous button is pressed. |
previousDisabled | boolean | undefined | false | Disables the previous control. |
previousIcon | ReactNode | — | Replace the previous-button icon. |
previousLabel | string | undefined | — | Previous button `aria-label`. |
shadow system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined | — | — |
size system | CalendarSize | undefined | 'md' | Width/font of the header controls and month cells. |
theme system | ThemeName | null | undefined | — | Applies a theme to this element |
withCellSpacing | boolean | undefined | true | Separate controls/rows with spacing. |
yearLabelFormat | DateLabelFormat | undefined | 'YYYY' | dayjs format for the year label, or a function returning it. |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<TamaguiElement> | undefined |
Plus 497 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.