InputTime

Interface of InputTime
🏗 Coming Soon

InputTime provides a themable HTML5-equivalent time picking experience.

:

12 And 24 Hour Format

InputTime can display either a 12-hour or 24-hour time selecting interface. If not specified, it defaults to 12-hour time.

:
:

Controlled Component

InputTime accepts a value and onChange listener for the standard controlled component pattern.

:
Selected: 12:00

defaultValue

InputTime also accetpts a defaultValue prop if you don't want to control component value externally.

:

disabled

Use the disable property to make an input field uneditable.

:

readOnly

As the name suggests, readOnly makes the text uneditable.

:

ID & Form Labels

You can combine the id prop with form label, so that when the label is clicked it will focus on the hour input.

:

Focus & Blur

onFocus callback will fire when any of the three sub-fields (hour, minute, period) are focused. onBlur fires when the focus moves outside the component entirely.

:

Validation Error State

You can render a failed validation state with the prop validationType="error".

:

onValidationFail

In addition, InputTime will automatically check whether the provided value prop is actually a valid 24 hour time string, and fire the onValidationFail callback.

: