Time input

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-time-input
label="What time would you like to collect your coffee?"
></ic-time-input>

<IcTimeInput
label="What time would you like to collect your coffee?"
/>

Time input details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The label for the time input. Required type: string
Property disableTimes	An array of objects with start and end values that will be disabled in the time input. The times can be in any format supported as`timeFormat` , in ISO 8601 time string format (`HH:MM:SS` ) or as a JavaScript`Date` object. type: IcDisableTimeSelection[] - { start: string \| Date; end: string \| Date; }	[]
Property disabled Attribute disabled	If`true` , the disabled state will be set. type: boolean	false
Property emitTimePartChange Attribute emit-time-part-change	If`true` , every individual input field completed will emit an icTimeChange event. type: boolean - boolean \| undefined	false
Property helperText Attribute helper-text	The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the`timeFormat` value. type: string \| null - null \| string
Property hideHelperText Attribute hide-helper-text	If`true` , the helper text will be visually hidden, but still read out by screenreaders. type: boolean	false
Property hideLabel Attribute hide-label	If`true` , the label will be visually hidden, but will still be read out by screen readers. type: boolean - boolean \| undefined	false
Property inputId Attribute input-id	The ID for the input. type: string	`ic-time-input-${inputIds++}`
Property invalidTimeMessage Attribute invalid-time-message	The text to display as the validation message when an invalid time is entered. type: string	"Please enter a valid time."
Property max Attribute max	The latest time that will be allowed. The value can be in any format supported as`timeFormat` , in ISO 8601 time string format (`HH:MM:SS` ) or as a JavaScript`Date` object. type: string \| Date - Date \| string	""
Property min Attribute min	The earliest time that will be allowed. The value can be in any format supported as`timeFormat` , in ISO 8601 time string format (`HH:MM:SS` ) or as a JavaScript`Date` object. type: string \| Date - Date \| string	""
Property name Attribute name	The name of the control, which is submitted with the form data. type: string	this.inputId
Property required Attribute required	If`true` , the input will require a value. type: boolean	false
Property showAmPmToggle Attribute show-am-pm-toggle	If`true` , the time input will show an AM/PM toggle when in 12-hour time period. type: boolean - boolean \| undefined	false
Property showClearButton Attribute show-clear-button	If`true` , a button which clears the time input when clicked will be displayed. type: boolean - boolean \| undefined	true
Property size Attribute size	The size of the time input to be displayed. type: IcSizes - "large" \| "medium" \| "small"	"medium"
Property theme Attribute theme	Sets the time picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"
Property timeFormat Attribute time-format	The format in which the time will be displayed. type: IcTimeFormat - "HH:MM" \| "HH:MM:SS" \| "HH:MM:SS.SSS"	this.DEFAULT_TIME_FORMAT
Property timePeriod Attribute time-period	The time period format: "12" for 12-hour, "24" for 24-hour. Defaults to "24". type: "12" \| "24"	"24"
Property validationAriaLive Attribute validation-aria-live	The value of the`aria-live` attribute on the validation message. type: IcAriaLive - "assertive" \| "off" \| "polite"	"polite"
Property validationStatus Attribute validation-status	The validation status - e.g. 'error' \| 'warning' \| 'success'. This will override the built-in time validation. type: IcInformationStatusOrEmpty - "" \| "error" \| "success" \| "warning"	""
Property validationText Attribute validation-text	The text to display as the validation message. This will override the built-in time validation. type: string - string \| undefined	""
Property value Attribute value	The value of the time input. The value can be in any format supported as`timeFormat` , in ISO 8601 time string format (`HH:MM:SS` ) or as a JavaScript`Date` object. type: IcDateValueFormat - Date \| null \| string \| undefined	""

Property

label

Attribute

label

The label for the time input.

Required

type: string

Property

disableTimes

An array of objects with start and end values that will be disabled in the time input. The times can be in any format supported astimeFormat , in ISO 8601 time string format (HH:MM:SS ) or as a JavaScriptDate object.

type: IcDisableTimeSelection[] - { start: string | Date; end: string | Date; }

Default: []

Property

disabled

Attribute

disabled

Iftrue , the disabled state will be set.

type: boolean

Default: false

Property

emitTimePartChange

Attribute

emit-time-part-change

Iftrue , every individual input field completed will emit an icTimeChange event.

type: boolean - boolean | undefined

Default: false

Property

helperText

Attribute

helper-text

The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with thetimeFormat value.

type: string | null - null | string

Property

hideHelperText

Attribute

hide-helper-text

Iftrue , the helper text will be visually hidden, but still read out by screenreaders.

type: boolean

Default: false

Property

hideLabel

Attribute

hide-label

Iftrue , the label will be visually hidden, but will still be read out by screen readers.

type: boolean - boolean | undefined

Default: false

Property

inputId

Attribute

input-id

The ID for the input.

type: string

Default:ic-time-input-${inputIds++}

Property

invalidTimeMessage

Attribute

invalid-time-message

The text to display as the validation message when an invalid time is entered.

type: string

Default: "Please enter a valid time."

Property

max

Attribute

max

The latest time that will be allowed. The value can be in any format supported astimeFormat , in ISO 8601 time string format (HH:MM:SS ) or as a JavaScriptDate object.

type: string | Date - Date | string

Default: ""

Property

min

Attribute

min

The earliest time that will be allowed. The value can be in any format supported astimeFormat , in ISO 8601 time string format (HH:MM:SS ) or as a JavaScriptDate object.

type: string | Date - Date | string

Default: ""

Property

name

Attribute

name

The name of the control, which is submitted with the form data.

type: string

Default: this.inputId

Property

required

Attribute

required

Iftrue , the input will require a value.

type: boolean

Default: false

Property

showAmPmToggle

Attribute

show-am-pm-toggle

Iftrue , the time input will show an AM/PM toggle when in 12-hour time period.

type: boolean - boolean | undefined

Default: false

Property

showClearButton

Attribute

show-clear-button

Iftrue , a button which clears the time input when clicked will be displayed.

type: boolean - boolean | undefined

Default: true

Property

size

Attribute

size

The size of the time input to be displayed.

type: IcSizes - "large" | "medium" | "small"

Default: "medium"

Property

theme

Attribute

theme

Sets the time picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

Property

timeFormat

Attribute

time-format

The format in which the time will be displayed.

type: IcTimeFormat - "HH:MM" | "HH:MM:SS" | "HH:MM:SS.SSS"

Default: this.DEFAULT_TIME_FORMAT

Property

timePeriod

Attribute

time-period

The time period format: "12" for 12-hour, "24" for 24-hour. Defaults to "24".

type: "12" | "24"

Default: "24"

Property

validationAriaLive

Attribute

validation-aria-live

The value of thearia-live attribute on the validation message.

type: IcAriaLive - "assertive" | "off" | "polite"

Default: "polite"

Property

validationStatus

Attribute

validation-status

The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in time validation.

type: IcInformationStatusOrEmpty - "" | "error" | "success" | "warning"

Default: ""

Property

validationText

Attribute

validation-text

The text to display as the validation message. This will override the built-in time validation.

type: string - string | undefined

Default: ""

Property

value

Attribute

value

The value of the time input. The value can be in any format supported astimeFormat , in ISO 8601 time string format (HH:MM:SS ) or as a JavaScriptDate object.

type: IcDateValueFormat - Date | null | string | undefined

Default: ""

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot helper-text	Content is set as the helper text for the time input.

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icBlur React onIcBlur	Emitted when the input loses focus.	{ value: Date \| null; }
Web component icFocus React onIcFocus	Emitted when the input gains focus.	{ value: Date \| null; }
Web component icTimeChange React onIcTimeChange	Emitted when the value has changed.	{ value: Date \| null; timeObject: { hour: string \| null; minute: string \| null; second: string \| null; millisecond: string \| null; period: string \| null; }; }

Web component

icBlur

React

onIcBlur

Emitted when the input loses focus.

{ value: Date | null; }

Web component

icFocus

React

onIcFocus

Emitted when the input gains focus.

{ value: Date | null; }

Web component

icTimeChange

React

onIcTimeChange

Emitted when the value has changed.

{ value: Date | null; timeObject: { hour: string | null; minute: string | null; second: string | null; millisecond: string | null; period: string | null; }; }

Methods

Name	Description	Signature
Method getTime