Forms

TimePicker

A time typed or picked, shown in the reader's format.

import { TimePicker, parseTime, formatTime } from "@flinbu/seed";

12 and 24 hour

Publish at

Type 2:15pm or 1415.

Quiet hours start

import { Field, TimePicker } from "@flinbu/seed";

const [t, setT] = React.useState<string | null>("09:30");

<div className="grid w-full max-w-md gap-base sm:grid-cols-2">
  <Field label="Publish at" hint="Type 2:15pm or 1415."><TimePicker value={t} onValueChange={setT} /></Field>
  <Field label="Quiet hours start"><TimePicker defaultValue="22:00" hourCycle={24} step={30} /></Field>
</div>

Use it for

Schedules, quiet hours, publish times.

Props

Prop	Type	Default	Description
`value / defaultValue`	`stringnull`	–	24-hour HH:mm.
`step`	`number`	`15`	Minutes between options.
`min / max`	`string`	–	Limits.
`hourCycle`	`1224`	–	Default from the locale.

Accessibility

The combobox pattern; typed text is parsed on Enter or blur, and anything unreadable is marked invalid.