Time picker

A time picker component allows users to select a time from a list of options.

Examples

Appending the TimePicker to the document.body may cause accessibility issues, including being unable to navigate into the menu via keyboard or other assistive technologies. Instead, appending to the "parent" is recommended.

Basic 12 hour

Basic 24 hour

Custom delimiter

Minimum/maximum times

The minTime/maxTime props restrict the options shown for the user to select from as well as trigger the invalidMinMaxErrorMessage if the user enters a time outside this range.

With seconds

Basic 24 hours with seconds

Props

TimePicker

*required
NameTypeDefaultDescription
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
idstringId of the time picker
includeSecondsbooleanIncludes number of seconds with the chosen time and allows users to manually edit the seconds value.
inputPropsTextInputProps{}Additional props for input field
invalidFormatErrorMessagestring'Invalid time format'Error message to display when the time is provided in an invalid format.
invalidMinMaxErrorMessagestring'Invalid time entered'Error message to display when the time provided is not within the minTime/maxTime constriants
is24HourbooleanfalseTrue if the time is 24 hour time. False if the time is 12 hour time
isDisabledbooleanfalseFlag indicating the time picker is disabled
isOpenbooleanfalseFlag to control the opened state of the time picker menu
maxTimestring | Date''A time string indicating the maximum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format
menuAppendToHTMLElement | (() => HTMLElement) | 'inline' | 'parent''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="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')}
minTimestring | Date''A time string indicating the minimum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format
onChange( event: React.FormEvent<HTMLInputElement>, time: string, hour?: number, minute?: number, seconds?: 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
setIsOpen(isOpen?: boolean) => void() => {}Handler invoked each time the open state of time picker updates
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.
widthstring'150px'Width of the time picker.
zIndexnumber9999z-index of the time picker

CSS variables

Expand or collapse columnSelectorVariableValue