TimePicker API

API reference docs for theTimePickercomponent. For examples and details on the usage of this component, visit the component demo page.

Props​

PropTypeDescriptionDefault
labelReactNodeLabel for the TimePicker._
labelVisibility?'visible' | 'hidden'Determines if the label is visible to sighted users.'hidden'
format?'12' | '24'Format for the time (12-hour or 24-hour).'12'
interval?15 | 30 | 45 | 60Interval for time options (in minutes).60
variant?'standard' | 'subtle'The default visual style of the nested input.'standard'
closeButtonPropsForMobile?{ label: string, onClick: function, size: 'large' | 'standard' | 'small' }If closeButtonPropsForMobile is provided then the mobile version of the component will have a close button_

defaultValue?

Date | string

The default TimeOption to be selected on first render .

Note: You can set customDays as a defaultValue, but ensure the value exists in both the customDays array and the defaultValue. If it's missing from either, it will be ignored.

_

minValue?DateThe minimum allowed time value. The time picker will only show options that are later than this value, excluding any times before and equal to this time._
maxValue?DateThe maximum allowed time value. The time picker will only show options that are earlier than this value, excluding any times after and equal to this time._
mobileFriendly?booleanIndicates if the opened element should be rendered as a Sheet in mobile viewportstrue
size?'standard' | 'large'The size of the field which is built-in to the Timepicker.'standard'
titleForMobile?stringOn mobile Timepicker renders a Sheet component. If titleForMobile is provided then the Sheet will have a Header with title rendered_
customValues?Date[]An optional array of custom times (date Object values) to include in the generated options._

showDurationLabel?

boolean

Determines whether to show the duration label.

Note: The minValue prop is required when using this prop to display the label.

false

clear?booleanDetermines whether to clear the TimePicker input and selection. When true, it resets the input field and removes any selected time._
errorMessage?ReactNodeMessage to show when the time picker is invalid._
isDisabled?booleanWhen true, the timepicker will be announced as disabled to screen-readers and styled accordingly._
shouldUsePortal?booleanWhen true, the timepicker options(Popover) will be rendered outside the DOM hierarchy of the parent component.true
onSelectfunctionCallback function for when a new option is selected._
customDays?string[]An array of custom strings that can be added as TimeOption in the Timepicker._