TimeInputProps
Properties
Section titled “Properties”aria-describedby?
Section titled “aria-describedby?”optional aria-describedby?: string;ids of external error/help text.
className?
Section titled “className?”optional className?: string;defaultValue?
Section titled “defaultValue?”optional defaultValue?: string | null;Uncontrolled initial value. Ignored when value is given.
optional dir?: "ltr" | "rtl";Writing direction for the field. Inherited from the document when unset.
Distinct from the locale: locale decides which segments there are and in
what order, dir decides which way the box lays them out. A Hebrew page
showing a Gregorian date needs one without the other.
disabled?
Section titled “disabled?”optional disabled?: boolean;emitOutOfRange?
Section titled “emitOutOfRange?”optional emitOutOfRange?: boolean;Report a completed time outside min/max through onChange anyway,
leaving the field marked invalid rather than refusing the input.
Default
Section titled “Default”true — the alternative silently discards what the user typed.hour12?
Section titled “hour12?”optional hour12?: boolean;Force a 12- or 24-hour clock.
Default
Section titled “Default”whatever the locale usesoptional id?: string;Base id; each segment derives ${id}-hour, ${id}-minute, …
invalid?
Section titled “invalid?”optional invalid?: boolean;Sets aria-invalid and data-invalid on the group.
label?
Section titled “label?”optional label?: ReactNode;Accessible name for the whole field.
locale?
Section titled “locale?”optional locale?: string;BCP 47 tag deciding segment order, separators and the clock.
optional max?: string;Latest allowed time, inclusive, as HH:mm[:ss].
optional min?: string;Earliest allowed time, inclusive, as HH:mm[:ss].
minuteStep?
Section titled “minuteStep?”optional minuteStep?: number;Arrow-key step for the minute segment, in minutes. Must divide 60.
Default
Section titled “Default”1optional name?: string;Emits a hidden input carrying the 24-hour value, readable by a native <form>.
onBlur?
Section titled “onBlur?”optional onBlur?: (event) => void;Fires when focus leaves the whole field, not when moving between segments.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
event | FocusEvent<HTMLElement> |
Returns
Section titled “Returns”void
onChange?
Section titled “onChange?”optional onChange?: (value) => void;Fires when the time becomes complete and valid, and when it stops being so. Never fires mid-entry with a half-typed number.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
value | string | null |
Returns
Section titled “Returns”void
onFocus?
Section titled “onFocus?”optional onFocus?: (event) => void;Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
event | FocusEvent<HTMLElement> |
Returns
Section titled “Returns”void
onPartsChange?
Section titled “onPartsChange?”optional onPartsChange?: (parts) => void;Fires on every keystroke, including while the time is incomplete.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
parts | TimeParts |
Returns
Section titled “Returns”void
onWarn?
Section titled “onWarn?”optional onWarn?: (warning) => void;Called in development whenever a prop is rejected or coerced — see
TimeWarning. When omitted, the same warnings go to console.warn.
The entire path is stripped from production builds.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
warning | TimeWarning |
Returns
Section titled “Returns”void
placeholders?
Section titled “placeholders?”optional placeholders?: TimePlaceholders;Placeholder per segment.
Default
Section titled “Default”hh / mm / ss / --
readOnly?
Section titled “readOnly?”optional readOnly?: boolean;renderSegment?
Section titled “renderSegment?”optional renderSegment?: (state) => ReactNode;Custom rendering for one segment.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
state | TimeSegmentState |
Returns
Section titled “Returns”ReactNode
required?
Section titled “required?”optional required?: boolean;secondStep?
Section titled “secondStep?”optional secondStep?: number;Arrow-key step for the seconds segment, in seconds. Must divide 60.
Default
Section titled “Default”1segmentLabels?
Section titled “segmentLabels?”optional segmentLabels?: TimeSegmentLabels;Accessible name per segment.
Default
Section titled “Default”Hour / Minute / Second / AM/PM
showSeconds?
Section titled “showSeconds?”optional showSeconds?: boolean;Show a seconds segment.
Default
Section titled “Default”falsestyle?
Section titled “style?”optional style?: CSSProperties;value?
Section titled “value?”optional value?: string | null;Controlled value as HH:mm or HH:mm:ss, 24-hour, or null for empty.
Always 24-hour whatever the field displays: one canonical format means a
value can be stored, compared and sorted without knowing which locale
produced it. A string, never a Date — a time of day is not an instant.