Forms

TimeField

A time of day in a Makado field.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`label`Required	`string`
`hideLabel`	`boolean`
`value`	`string`
`onChange`	`(value: string) => void`
`onBlur`	`React.FocusEventHandler<HTMLInputElement>`
`step`	`number`	Seconds between choices (default 300, five minutes).
`min`	`string`
`max`	`string`
`icon`	`IconName`
`help`	`React.ReactNode`
`invalid`	`boolean`
`disabled`	`boolean`
`required`	`boolean`
`name`	`string`
`id`	`string`
`size`	`'M' \| 'L'`
`className`	`string`

Guidelines

A time of day in a Makado field. It is the browser's own time input (type="time"), so typing, the arrow keys, the time picker and screen readers all behave the way people already know. The value goes in and out as 24 hour "HH:MM"; the browser shows it in the person's own format (9:00 AM).

Provide: label (always; set hideLabel when a group around it already names it, and the label becomes the field's accessible name), value, onChange(value), and optionally step (seconds, default 300), min, max, help, invalid, size.

136px wide, the same 32px (M) or 40px (L) box, border and focus ring as TextField.
color-scheme follows the theme, so the native clock icon and picker read well in light and dark.
A partly typed time gives "". Treat an empty value as "not finished", not as midnight.
For a start and an end together, use TimeRange.