Time Input

A segmented time input component with keyboard navigation and configurable granularity. Control which time segments are shown (hour, minute, second) and supports both 12-hour and 24-hour formats with arrow key navigation.

Import

Usage

Default (12-hour)

:

24-hour Format

:

Hour Only

With Seconds

::

Empty

:

Required

:

With Description

:

Enter the meeting time in HH:MM format.

Validation

:

Disable Errors

:

Custom Error

:

Please select a time during business hours (9:00 - 17:00).

TimeInput Props

AttributeTypeDefaultDescription
labelReactNode-Label text for the input.
valueDate | null-The current time value (controlled).
onChange(date: Date | null) => void-Callback fired when the time changes.
classNamestring-Additional CSS classes for the component.
hourCycle12 | 2412Hour format: 12-hour (with AM/PM) or 24-hour.
granularity"hour" | "minute" | "second""minute"Controls which time segments are shown: "hour" shows only hours, "minute" shows hours and minutes, "second" shows all three.
isRequiredbooleanfalseShows an asterisk (*) next to the label.
descriptionReactNode-Helper text displayed below the input.
isInvalidbooleanfalseSets the input to error state with red border.
errorMessageReactNode-Error message displayed when isInvalid is true.
disableErrorsbooleanfalseDisables automatic validation error messages.