Dates@knitui/dates
DecadeLevelGroup
DecadeLevelGroup renders numberOfColumns DecadeLevel panels side by side inside a LevelsGroup, stepping ten years (one decade) per column over a year grid. It is the decade analogue of YearLevelGroup/MonthLevelGroup and the top calendar level (no zoom-out). 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 DecadeLevel/YearsList; per-year customization flows through the getYearControlProps callback.
import { DecadeLevelGroup } from "@knitui/dates";Playground
Loading playground…
<DecadeLevelGroup
decade="2024-03-15"
/>Examples
Default
A single decade panel (the default).
Loading example…
Two Columns
Two decades side by side — ten years 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…
Bounded
Bounded by minDate/maxDate: the previous/next controls disable at the bounds and out-of-range year cells are disabled (delegated to YearsList).
Loading example…
Per Year Props
Per-year customization via getYearControlProps — the "explicit per-item beats sugar" callback (#7), forwarded to every panel. Here it disables the year 2025.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
decade required | string | 2024-03-15 | Decade of the first (left-most) panel, any date within it (`YYYY-MM-DD`). |
decadeLabelFormat | DecadeLabelFormat | undefined | 'YYYY' | dayjs format for the decade label, or a function returning it. |
disabled system | boolean | undefined | — | |
fullWidth system | boolean | undefined | false | Stretch the group (and its panels) to the full width of its container. |
getYearControlProps | ((date: DateStringValue) => Partial<PickerControlProps>) | undefined | — | Passes props down to each year `PickerControl`, keyed by date (wins over `styles.control`). |
headerControlsOrder | CalendarHeaderControlName[] | undefined | ['previous', 'level', 'next'] | Order in which the controls are rendered. |
levelControlAriaLabel | string | ((decade: DateStringValue) => string) | undefined | — | Level control `aria-label`, or a function resolving it from each panel's decade. |
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. |
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 decade panels to display next to each other. |
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 year cells. |
theme system | ThemeName | null | undefined | — | Applies a theme to this element |
withCellSpacing | boolean | undefined | true | Separate controls/rows with spacing. |
yearsListFormat | string | undefined | 'YYYY' | dayjs format for the year labels. |
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.