Time input

Enter a time or choose its hour and minute.

Preview

Default

Design guidance

Time input owns a time of day as a 24-hour HH:mm string or null. It does not attach a date or timezone. Type four digits, or enter an hour and minute separated by a colon. Complete valid values commit; partial or invalid text stays editable. The clock opens the styled Time picker, with separate hour and minute choices.

Use Time input in the Date picker footer for a date-and-time composition. The caller owns whether time edits apply or reset with the date review. Use the native Input type="time" when the browser's time interface is preferred.

Installation

Install

No source.

Download example files — JSX recipes, demo styles and any sample assets. Install the component first.

Basic usage

123import { TimeInput } from "@/components/ui/time-input";

<TimeInput label="Start time" defaultValue="09:00" name="start-time" />

Structures

TimeInput is one convenience component. The caller owns its label and inputProps; the forwarded ref points to the root, while name submits a private hidden value. It composes Field, InputGroup, Popover, and TimePicker internally. Use Time picker directly when the caller needs only hour and minute selection.

Examples

Bounds and minute steps

Choose between 09:00 and 17:00 in five-minute steps. Unavailable hour/minute combinations cannot commit. Bounds that cross midnight are not supported.

Label placement

Keep the persistent label above the value. The clock aligns with the value row.

Required, invalid, read only, and disabled

These states remain caller-owned constraints and messages around the same input.

Required invalid read only and disabled

Controlled value and open state

Keep both the committed time and picker visibility in caller state.

API reference

Time input properties
Prop	Type	Default	Description
`value / defaultValue`	`string \| null`		Controlled or initial strict HH:mm time. Default null.
`onValueChange`	`(value: string \| null) => void`		Complete allowed times, or null when an optional input is cleared. Invalid or incomplete text does not emit.
`min / max`	`string`		Inclusive HH:mm bounds in one day. Invalid or reversed bounds are unavailable.
`minuteStep`	`number`	`1`	Positive integer divisor of 60. Applies to typing and picker selection.
`label / fieldPlacement`	`ReactNode / top \| ifta \| left \| placeholder`		Caller-owned Field label and placement. Defaults Time and top.
`required / disabled / readOnly / invalid`	`boolean`	`false`	Required value, disabled interaction, read-only value or external invalid state.
`name / form`	`string`		Submit only a valid committed HH:mm value; form can associate an external form.
`onValidityChange`	`(valid: boolean) => void`		Current text/configuration validity.
`open / defaultOpen / onOpenChange`	`boolean / boolean / (open: boolean) => void`		Controlled or initial picker visibility and changes.
`placeholder / inputProps`	`string / native input properties`		Default HH:mm prompt and native input attributes/events. Type, value, parsing, name and interaction state remain owned.
`className / ref / native root props`	`string / Ref<HTMLDivElement> / HTML attributes`		Root styling, ref and native root attributes.

Arrow Down opens the picker. Enter normalizes a complete allowed time. Escape closes the picker first; in an edited field it restores the committed value. Each picker column uses canonical radio-group keyboard navigation. Text editing preserves selection and composition. Empty picker choices do not invent a missing hour or minute.

Start time