Components

Time Field

A time of day, typed or stepped a part at a time, in the locale’s order, digits and 12- or 24-hour clock.

Reminder at

930AM

Value: 09:30

Import

import { TimeField } from '@rinzai/zen';

Examples

With date

A date and a time side by side: a DatePicker for the day, a TimeField for the time.

Date

Time

645PM

API reference

<TimeField>

A time of day, typed or stepped a part at a time: hour, minute and, where the locale uses a 12-hour clock, AM/PM, in the locale's order and digits. Type digits (it moves on when a part is full), ↑↓ to step (minutes by step), ←→ between parts, Backspace to clear one. The value is "HH:MM" (24-hour) once every part is set, and null until then.

Prop	Type	Default
`defaultValue` The first time, when the field keeps its own.	`string \| null`	`null`
`disabled`	`boolean`	`—`
`invalid` Show the field in its error state.	`boolean`	`—`
`locale` Defaults to the LocaleProvider's.	`string`	`—`
`name` Form field name: the time is submitted under it as "HH:MM".	`string`	`—`
`onValueChange`	`((value: string \| null) => void)`	`—`
`size` Height, matching Button's.	`"default" \| "lg" \| "sm"`	`default`
`step` Minutes ↑↓ move by, e.g. 5 or 15. Default 1.	`number`	`1`
`value` "HH:MM" (24-hour), or null, when you keep it.	`string \| null`	`—`