Dates@knitui/dates

TimeControlsList

TimeControlsList is one scrollable dropdown column of TimeControls (hours, minutes or seconds) for the TimePicker dropdown — built on the kit ScrollArea + a Box column of leaf controls, so it renders on web and native. Per-control sizing/colour/interaction live in the TimeControl leaf; TimeControlsList lays out the column, shares size via context, reveals the active control, and offers a per-value getControlProps passthrough plus per-slot styles sugar. Accent comes from the active Tamagui theme. Folder-local to TimePicker (not re-exported from the public barrel).

WebiOSAndroid3 style slots9 own props7 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

sizeLabel font size.

reversedRender the column in descending order.

false

maxHeightMax column height in px before it scrolls.

Playground

<TimeControlsList
  min={0}
  max={23}
  step={1}
  reversed={false}
  maxHeight={200}
  size="sm"
/>

Examples

Default

The hours column with a selected value (revealed on open).

Loading example…

DefaultSource Storybook

Stepped

A minutes column stepped by 5.

Loading example…

SteppedSource Storybook

Reversed

Descending order.

Loading example…

ReversedSource Storybook

Styled Slots

Per-slot styles sugar — recolour every control via the control slot.

Loading example…

Styled SlotsSource Storybook

Am Pm

The two-cell am/pm variant shown in the 12h dropdown.

Loading example…

Am PmSource Storybook

Sizes

Every size token.

Loading example…

SizesSource Storybook

Props

Prop	Type	Default	Description
`max` required	`number`	`23`	Largest value in the column.
`min` required	`number`	`0`	Smallest value in the column.
`onSelect` required	`(value: number) => void`	—	Called with the pressed value.
`reversed` required	`boolean \| undefined`	`false`	Render the column in descending order.
`step` required	`number`	`1`	Step between successive values.
`value` required	`number \| null`	—	Currently selected value, or `null`.
`getControlProps`	`((value: number) => Partial<TimeControlProps<number>>) \| undefined`	—	Passes props down to each `TimeControl`, keyed by value (wins over `styles.control`).
`maxHeight`	`number \| undefined`	`200`	Max column height in px before it scrolls.
`scrollAreaProps`	`ScrollAreaProps \| undefined`	—	Props forwarded to the underlying `ScrollArea` (wins over `styles.root`).
`size` system	`CalendarSize \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'sm'`	Label font size.
`styles` system	`SlotStyles<TimeControlsListStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.

Style slots

Every part of TimeControlsList can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`column`	`styles={{ column: { … } }}`
`control`	`styles={{ control: { … } }}`
`root`	`styles={{ root: { … } }}`