Dates@knitui/dates

PickerControl

The month/year/decade grid cell — the Day analogue for the year & decade levels, built on UnstyledButton. Every per-cell state (selected, in-range, first/last-in-range, disabled, fullWidth) is a boolean variant; accent comes from the active Tamagui theme= ramp (no color prop, no hex).

WebiOSAndroid5 own props8 examples

Stories Source Tests Open in Storybook

import { PickerControl } from "@knitui/dates";

Playground

Loading playground…

Playground

<PickerControl
  size="md"
  aria-label="January 2026"
>
  Jan
</PickerControl>

Examples

Default

A plain, interactive control.

Loading example…

DefaultSource Storybook

Selected

Selected — solid accent fill with contrast-coloured label.

Loading example…

SelectedSource Storybook

Disabled

Disabled — dimmed and non-interactive (selection/range styling suppressed).

Loading example…

DisabledSource Storybook

Range

A selected range across a month strip: the edges round their outer corners (firstInRange/lastInRange), the middle is a squared $color4 tint, and the endpoints are selected. Cells sit flush so the tint reads as one band.

Loading example…

RangeSource Storybook

Custom Content

Custom content — a non-text node renders without a label.

Loading example…

Custom ContentSource Storybook

Themed

The accent recolors with the Tamagui theme= prop — no color prop, no hex.

Loading example…

ThemedSource Storybook

Sizes

Every size token, from xxs to xxl.

Loading example…

SizesSource Storybook

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`Jan`	Control children — the month / year label (or a custom node).
`disabled` system	`boolean \| undefined`	`false`	Disables the control.
`firstInRange`	`boolean \| undefined`	`false`	Assigns first-in-range styles.
`fullWidth` system	`boolean \| undefined`	`false`	Determines whether the control should take the full width of its cell.
`inRange`	`boolean \| undefined`	`false`	Assigns in-range styles.
`lastInRange`	`boolean \| undefined`	`false`	Assigns last-in-range styles.
`selected`	`boolean \| undefined`	`false`	Assigns selected styles.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`CalendarSize \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'md'`	Width/font of the control.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element

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.