Skip to content
Patternfly Logo

Time picker

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.


Basic 12 hour

Basic 24 hour

Custom delimiter



aria-labelstringNo'Time picker'Accessible label for the time picker
classNamestringNo''Additional classes added to the time picker.
delimiterstringNo':'Character to display between the hour and minute
direction'up' | 'down'No'down'Flag specifying which direction the time picker menu expands
idstringNoId of the time picker
inputPropsTextInputPropsNo{}Additional props for input field
invalidFormatErrorMessagestringNo'Invalid time format'Error message to display when the time is provided in an invalid format.
is24HourbooleanNofalseTrue if the time is 24 hour time. False if the time is 12 hour time
isDisabledbooleanNofalseFlag indicating the time picker is disabled
menuAppendToHTMLElement | (() => HTMLElement) | 'inline'No'inline'The container to append the menu to. Defaults to 'inline' If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')}
onChange(time: string, hour?: number, minute?: number) => voidNoOptional event handler called each time the value in the time picker input changes.
placeholderstringNo'hh:mm'String to display in the empty time picker field as a hint for the expected time format
stepMinutesnumberNo30Size of step between time options in minutes.
timestring | DateNo''A time string. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format
validateTime(time: string) => booleanNoOptional validator can be provided to override the internal time validator.
widthstringNo150Width of the time picker.

CSS variables

View source on GitHub