Components
TimeInput

TimeInput

A Time Input is a field for a single time value.

Optional props

className

Custom className

type
string
default
null

error

Wether has error

type
boolean
default
null

hourCycle

Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.

type
12
24
default
null

granularity

Determines the smallest unit that is displayed in the time picker.

type
hour
minute
second
default
minute

hideTimeZone

Whether to hide the time zone abbreviation.

type
boolean
default
null

shouldForceLeadingZeros

Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.

type
boolean
default
null

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.

type
T
default
null

minValue

The minimum allowed time that a user may select.

type
TimeValue
default
null

maxValue

The maximum allowed time that a user may select.

type
TimeValue
default
null

isDisabled

Whether the input is disabled.

type
boolean
default
null

isReadOnly

Whether the input can be selected but not changed by the user.

type
boolean
default
null

isRequired

Whether user input is required on the input before form submission.

type
boolean
default
null

isInvalid

Whether the input value is invalid.

type
boolean
default
null

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.

type
aria
native
default
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.

type
((value: T) => true
ValidationError
null
undefined)
default
null

autoFocus

Whether the element should receive focus on render.

type
boolean
default
null

onFocus

Handler that is called when the element receives focus.

type
((e: React.FocusEvent<Target, Element>) => void)
default
null

onBlur

Handler that is called when the element loses focus.

type
((e: React.FocusEvent<Target, Element>) => void)
default
null

onFocusChange

Handler that is called when the element's focus status changes.

type
((isFocused: boolean) => void)
default
null

onKeyDown

Handler that is called when a key is pressed.

type
((e: KeyboardEvent) => void)
default
null

onKeyUp

Handler that is called when a key is released.

type
((e: KeyboardEvent) => void)
default
null

description

A description for the field. Provides a hint such as specific requirements for what to choose.

type
React.ReactNode
default
null

errorMessage

An error message for the field.

type
React.ReactNode
((v: ValidationResult) => React.ReactNode)
default
null

value

The current value (controlled).

type
T
default
null

defaultValue

The default value (uncontrolled).

type
T
default
null

onChange

Handler that is called when the value changes.

type
((value: C) => void)
default
null

aria-label

Defines a string value that labels the current element.

type
string
default
null

aria-labelledby

Identifies the element (or elements) that labels the current element.

type
string
default
null

aria-describedby

Identifies the element (or elements) that describes the object.

type
string
default
null

aria-details

Identifies the element (or elements) that provide a detailed, extended description for the object.

type
string
default
null

id

The element's unique identifier. See MDN.

type
string
default
null

name

The name of the input element, used when submitting an HTML form. See MDN.

type
string
default
null

Related components