Dates@knitui/dates

TimeGrid

A standalone grid of selectable time options. Cross-platform port of @mantine/dates' TimeGrid: controlled/uncontrolled value, 12h/24h + seconds formatting, min/max/disableTime gating, and styles sugar over its parts.

WebiOSAndroid4 style slots13 own props8 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

sizeControl size.

formatClock display mode.

Playground

<TimeGrid
  size="sm"
  format="24h"
/>

Examples

Default

Default uncontrolled grid.

Loading example…

DefaultSource Storybook

Twelve Hour

12h clock with AM/PM labels.

Loading example…

Twelve HourSource Storybook

With Seconds

Seconds shown in each label.

Loading example…

With SecondsSource Storybook

Bounded

Bounded + disabled — controls outside [minTime, maxTime] or listed in disableTime are disabled.

Loading example…

BoundedSource Storybook

Allow Deselect

Deselectable — re-pressing the active control clears it.

Loading example…

Allow DeselectSource Storybook

Styled

Per-slot styles sugar — recolor the labels and add a denser grid.

Loading example…

StyledSource Storybook

Sizes

Every size token.

Loading example…

SizesSource Storybook

Props

Prop	Type	Default	Description
`data` required	`string[]`	—	Time data in 24h format to display, e.g. `['10:00', '18:30', '22:00']`. Values must be unique.
`allowDeselect`	`boolean \| undefined`	`false`	Whether the active option can be deselected by clicking it again.
`amPmLabels`	`TimePickerAmPmLabels \| undefined`	`{ am: 'AM', pm: 'PM' }`	Labels used for am/pm values.
`defaultValue`	`string \| null \| undefined`	—	Uncontrolled component default value.
`disabled` system	`boolean \| undefined`	—	If set, all controls are disabled.
`disableTime`	`string[] \| ((time: string) => boolean) \| undefined`	—	Array of time values, or a predicate, used to disable controls.
`format`	`TimePickerFormat \| undefined` 24h · 12h	`'24h'`	Clock display mode.
`getControlProps`	`((time: string) => TimeGridControlPassthrough) \| undefined`	—	A function to pass props down to a control based on its time value (wins over `styles.control`).
`maxTime`	`string \| undefined`	—	All controls after this time are disabled.
`minTime`	`string \| undefined`	—	All controls before this time are disabled.
`onChange`	`((value: string \| null) => void) \| undefined`	—	Called when the value changes.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`simpleGridProps`	`(Omit<GetFinalProps<RNTamaguiViewNonStyleProps, StackStyleBase, { shadow?: "xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| undefined; }>, keyof SimpleGridProps> & SimpleGridProps) \| undefined`	`{ cols: 3, spacing: 'xs' }`	Props passed down to the underlying `SimpleGrid`.
`size` system	`CalendarSize \| undefined` xs · sm · md · lg · xl	`'sm'`	Control size.
`styles` system	`SlotStyles<TimeGridStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`value`	`string \| null \| undefined`	—	Controlled component value.
`withSeconds`	`boolean \| undefined`	`false`	Whether the seconds part is displayed.

Style slots

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

Slot	Usage
`control`	`styles={{ control: { … } }}`
`grid`	`styles={{ grid: { … } }}`
`label`	`styles={{ label: { … } }}`
`root`	`styles={{ root: { … } }}`

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.