TimePicker

Time selection. The value is a string — "HH:mm" (or "HH:mm:ss" with showSeconds), 24-hour. Steps thin out the pickable values.

Opens at

15-minute steps

With seconds


import { TimePicker } from '@gg-software/ui';
 
<TimePicker label="Opens at" value={time} onChange={(value) => setTime(value)} />
<TimePicker label="15-minute steps" minuteStep={15} clearable />
<TimePicker label="With seconds" showSeconds />

Props

Prop	Type	Default	Description
`value`	`string \| null`	—	"HH:mm" or "HH:mm:ss" (24-hour)
`defaultValue`	`string \| null`	`null`
`onChange`	`((value: string \| null) => void)`	—
`showSeconds`	`boolean`	`false`
`hourStep`	`number`	`1`
`minuteStep`	`number`	`1`
`secondStep`	`number`	`1`
`placeholder`	`string`	`Select time`
`clearable`	`boolean`	`false`
`label`	`ReactNode`	—
`hint`	`ReactNode`	—
`error`	`ReactNode`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	`md`
`status`	`"warning" \| "error"`	—
`disabled`	`boolean`	`false`
`id`	`string`	—
`name`	`string`	—
`className`	`string`	—

* required · generated from packages/ui/src/input/TimePicker/TimePicker.tsx