Skip to content
Patternfly Logo

Time picker

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack.


Basic 12 hour

Basic 24 hour

Custom delimiter



aria-labelstring'Time picker'Accessible label for the time picker
classNamestring''Additional classes added to the time picker.
delimiterstring':'Character to display between the hour and minute
direction'up' | 'down''down'Flag specifying which direction the time picker menu expands
idstringId of the time picker
inputPropsTextInputProps{}Additional props for input field
invalidFormatErrorMessagestring'Invalid time format'Error message to display when the time is provided in an invalid format.
is24HourbooleanfalseTrue if the time is 24 hour time. False if the time is 12 hour time
isDisabledbooleanfalseFlag indicating the time picker is disabled
menuAppendToHTMLElement | (() => HTMLElement) | 'inline''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, isValid?: boolean) => voidOptional event handler called each time the value in the time picker input changes.
placeholderstring'hh:mm'String to display in the empty time picker field as a hint for the expected time format
stepMinutesnumber30Size of step between time options in minutes.
timestring | Date''A time string. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format
validateTime(time: string) => booleanOptional validator can be provided to override the internal time validator.
widthstring150Width of the time picker.

CSS variables

View source on GitHub