TimeField
The <TimeField>
allows users to enter and edit time values using the keyboard. Each part of the time value—such as hour, minute, and optionally AM/PM—is displayed in an individually editable segment. These segments are focusable and can be incremented or decremented using the arrow keys, or edited by typing. This segmented approach ensures correct formatting and parsing of time values across different locales and hour cycles, and provides a reliable, keyboard-friendly way to input time.
Anatomy
A <TimeField>
consists of a label and a group of segments representing each unit of a time, such as hours, minutes and seconds.

Appearance
The appearance of a component can be customized using the variant
and size
props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
Property | Type | Description |
---|---|---|
variant | - | The available variants of this component. |
size | - | The available sizes of this component. |
Usage
The <TimeField>
component is a flexible input element for selecting times within forms. It improves user experience by offering a clear and structured way to enter time values, minimizing errors from manual input. With support for labels, descriptions, and time formatting options like 12- or 24-hour cycles, it communicates its function effectively. The component also allows setting default values and customizing granularity (e.g., hours, minutes, seconds). This makes the <TimeField>
ideal for applications that require accurate and accessible time selection.
Min/Max Values
The minValue
and maxValue
props are used to perform built-in validation. This prevents the user from choosing times outside the valid range.
Props
aria-describedby?
string;
aria-details?
string;
aria-label?
string;
aria-labelledby?
string;
autoFocus?
boolean;
defaultValue?
TimeValue | null;
description?
ReactNode;
disabled?
boolean;
true
, the input is disabled."false"
error?
boolean;
true
, the field is considered invalid and if set the errorMessage
is shown instead of the description
."false"
errorMessage?
ReactNode | ((v: ValidationResult) => ReactNode);
granularity?
"hour" | "minute" | "second";
"minute"
hideTimeZone?
boolean;
hourCycle?
12 | 24;
24
id?
string;
label?
ReactNode;
maxValue?
TimeValue | null;
minValue?
TimeValue | null;
name?
string;
onBlur?
(e: FocusEvent<Element, Element>) => void;
onChange?
(value: TimeValue | null) => void;
onFocus?
(e: FocusEvent<Element, Element>) => void;
onFocusChange?
(isFocused: boolean) => void;
onKeyDown?
(e: KeyboardEvent) => void;
onKeyUp?
(e: KeyboardEvent) => void;
placeholderValue?
TimeValue;
readOnly?
boolean;
true
, the input is readOnly."false"
ref?
Ref<HTMLInputElement>;
ref.current
to null
(or call the ref with null
if you passed a callback ref).
@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}required?
boolean;
true
, the input is required."false"
shouldForceLeadingZeros?
boolean;
"none"
validate?
(value: TimeValue) => true | ValidationError | null;
validationBehavior="native"
. For realtime validation, use the isInvalid
prop instead.validationBehavior?
"native" | "aria";
'native'
value?
TimeValue | null;
width?
WidthProp;
"full"