TimePicker API

label

ReactNode

Label 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 | 60

Interval 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?

Date

The 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?

Date

The 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?

boolean

Indicates if the opened element should be rendered as a Sheet in mobile viewports

true

size?

'standard' | 'large'

The size of the field which is built-in to the Timepicker.

'standard'

titleForMobile?

string

On 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?

boolean

Determines whether to clear the TimePicker input and selection. When true, it resets the input field and removes any selected time.

_

errorMessage?

ReactNode

Message to show when the time picker is invalid.

_

isDisabled?

boolean

When true, the timepicker will be announced as disabled to screen-readers and styled accordingly.

_

shouldUsePortal?

boolean

When true, the timepicker options(Popover) will be rendered outside the DOM hierarchy of the parent component.

true

onSelect

function

Callback function for when a new option is selected.

_

customDays?

string[]

An array of custom strings that can be added as TimeOption in the Timepicker.

_