TimeInput
A Time Input is a field for a single time value.
Optional props
className
Custom className
error
Wether has error
hourCycle
Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
granularity
Determines the smallest unit that is displayed in the time picker.
hideTimeZone
Whether to hide the time zone abbreviation.
shouldForceLeadingZeros
Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.
placeholderValue
A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults to 12:00 AM or 00:00 depending on the hour cycle.
minValue
The minimum allowed time that a user may select.
maxValue
The maximum allowed time that a user may select.
isDisabled
Whether the input is disabled.
isReadOnly
Whether the input can be selected but not changed by the user.
isRequired
Whether user input is required on the input before form submission.
isInvalid
Whether the input value is invalid.
validationBehavior
Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
validate
A function that returns an error message if a given value is invalid.
Validation errors are displayed to the user when the form is submitted
if validationBehavior="native". For realtime validation, use the isInvalid
prop instead.
autoFocus
Whether the element should receive focus on render.
onFocus
Handler that is called when the element receives focus.
onBlur
Handler that is called when the element loses focus.
onFocusChange
Handler that is called when the element's focus status changes.
onKeyDown
Handler that is called when a key is pressed.
onKeyUp
Handler that is called when a key is released.
description
A description for the field. Provides a hint such as specific requirements for what to choose.
errorMessage
An error message for the field.
value
The current value (controlled).
defaultValue
The default value (uncontrolled).
onChange
Handler that is called when the value changes.
aria-label
Defines a string value that labels the current element.
aria-labelledby
Identifies the element (or elements) that labels the current element.
aria-describedby
Identifies the element (or elements) that describes the object.
aria-details
Identifies the element (or elements) that provide a detailed, extended description for the object.
Related components
DatePicker
A Date Picker is a field for single date values that may include time. The date can be typed or selected with the help of a Calendar.
DateRangePicker
A Date Range Picker is a field for date period values that may include time. The date can be typed or selected in a Calendar.
Input
An Input is a field for short text values. It can include masks and character restrictions, such as accepting only numbers.
Select
Select opens a dropdown with between five and seven values for users to choose one. Use Radios for less items or a Combobox for more items.