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 times 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[] - export type IcDisableTimeSelection = \| string \| Date \| { 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 icChange 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 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"	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 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: string \| Date \| null \| undefined - Date \| null \| string \| undefined	""

Property

label

Attribute

label

The label for the time input.

Required

type: string

Property

disableTimes

An array of times 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[] - export type IcDisableTimeSelection = | string | Date | { 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 icChange 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

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"

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

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.

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 icChange React onIcChange	Emitted when the value has changed.	{ value: Date \| null; timeObject: { hour: string \| null; minute: string \| null; second: string \| null; }; }
Web component icFocus React onIcFocus	Emitted when the input gains focus.	{ value: Date \| null; }

Web component

icBlur

React

onIcBlur

Emitted when the input loses focus.

{ value: Date | null; }

Web component

icChange

React

onIcChange

Emitted when the value has changed.

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

Web component

icFocus

React

onIcFocus

Emitted when the input gains focus.

{ value: Date | null; }

Methods

Name	Description	Signature
Method getTime	Returns the value as a Date object	getTime() => Promise<Date \| null>

Method

getTime

Returns the value as a Date object

getTime() => Promise<Date | null>

Variants

With values

String

Interactive example

Web component

React

Show full code

<ic-time-input
label="What time would you like to collect your coffee?"
value="13:45:00"
></ic-time-input>

<IcTimeInput
label="What time would you like to collect your coffee?"
value="13:45:00"
/>

Date object

Interactive example

Web component

React

Show full code

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

<IcTimeInput
label="What time would you like to collect your coffee?"
value={newDate("2025-07-14T15:30:45")}
/>

Zulu time

Interactive example

Web component

React

Show full code

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

<IcTimeInput
id="time-input-default-zulu-time"
label="What time would you like to collect your coffee?"
value="15:30:45Z"
/>

Required

To set the time input as a required field, set therequired prop totrue . This will add an asterisk at the end of the time input label.

Interactive example

Web component

React

Show full code

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

<IcTimeInputlabel="What time would you like to collect your coffee?"required/>

IcChange event

Retrieving the time input value viaIcChange returns the time as a Date object.

The event returns the Date object once hour, minute and second have been entered.

Interactive example

Web component

React

Show full code

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

<IcTimeInput
label="What time would you like to collect your coffee?"
onIcChange={(event)=>console.log("icChange", event.detail.value)}
/>

IcChange with emitTimePartChange

When theemitTimePartChange prop is set totrue , theIcChange event will be emitted anytime part of the time input changes (i.e. any change to the hour, minute or second).

Interactive example

Web component

React

Show full code

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

<IcTimeInput
emitTimePartChange
label="What time would you like to collect your coffee?"
onIcChange={(event)=>
console.log("icChange emitted with every time part change", event.detail)
}
/>

Hide label

To hide the label, set thehideLabel prop totrue . The requiredlabel will still be read out by screen readers.

Interactive example

Web component

React

Show full code

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

<IcTimeInputlabel="What time would you like to collect your coffee?"hideLabel/>

Disabled

Set thedisabled prop totrue to prevent interaction with the time input.

Interactive example

Web component

React

Show full code

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

<IcTimeInputlabel="What time would you like to collect your coffee?"disabled/>

Sizes

Interactive example

Web component

React

Show full code

<ic-time-inputlabel="What time would you like to collect your coffee?"size="small"></ic-time-input>
<ic-time-inputlabel="What time would you like to collect your coffee?"></ic-time-input>
<ic-time-inputlabel="What time would you like to collect your coffee?"size="large"></ic-time-input>

<IcTimeInputlabel="What time would you like to collect your coffee?"size="small"/>
<IcTimeInputlabel="What time would you like to collect your coffee?"/>
<IcTimeInputlabel="What time would you like to collect your coffee?"size="large"/>

Custom helper text

Use the helper text to add additional detail for the time input. Display custom content using thehelper-text slot.

Interactive example

For special requests, contact us before choosing a time

Web component

React

Show full code

<ic-time-inputlabel="What time would you like to collect your coffee?"helper-text="We will have your order ready for you at this time"></ic-time-input>
<ic-time-inputlabel="What time would you like to collect your coffee?">
<ic-typographyvariant="caption"slot="helper-text">
<span>
      For special requests, <ic-linkhref="#">contact us</ic-link> before choosing a time
</span>
</ic-typography>
</ic-time-input>

<IcTimeInputlabel="What time would you like to collect your coffee?"helperText="We will have your order ready for you at this time"/>
<IcTimeInputlabel="What time would you like to collect your coffee?">
<IcTypographyvariant="caption"slot="helper-text">
<span>
      For special requests,{" "}
<IcLinkhref="#">contact us</IcLink> before choosing a time
</span>
</IcTypography>
</IcTimeInput>

Hide helper text

Interactive example

Web component

React

Show full code

<ic-time-input
label="What time would you like to collect your coffee?"
helper-text="We will have your order ready for you at this time"
hide-helper-text="true"
></ic-time-input>

<IcTimeInput
label="What time would you like to collect your coffee?"
helperText="We will have your order ready for you at this time"
hideHelperText
/>

Custom validation

Validation on time input is set via thevalidationStatus andvalidationText props.

validationStatus will set the style of the validation message.validationStatus accepts:

error
warning
success

validationStatus is required for thevalidationText to appear.

Interactive example

Web component

React

Show full code

<ic-time-input
label="What time would you like to collect your coffee?"
validation-status="error"
validation-text="There is a coffee shortage forecast for that time. Please choose a different time."
></ic-time-input>
<ic-time-input
label="What time would you like to collect your coffee?"
validation-status="warning"
validation-text="Please be aware that there may be a coffee shortage at that time."
></ic-time-input>
<ic-time-input
label="What time would you like to collect your coffee?"
validation-status="success"
validation-text="Your coffee will be available for you to collect at this time."
></ic-time-input>

<IcTimeInput
label="What time would you like to collect your coffee?"
validationStatus="error"
validationText="There is a coffee shortage forecast for that time. Please choose a different time."
/>
<IcTimeInput
label="What time would you like to collect your coffee?"
validationStatus="warning"
validationText="Please be aware that there may be a coffee shortage at that time."
/>
<IcTimeInput
label="What time would you like to collect your coffee?"
validationStatus="success"
validationText="Your coffee will be available for you to collect at this time."
/>

Disabled times

To disable specific times in the time input, set thedisableTimes prop. ThedisableTimes prop accepts an array of time objects or strings. Each time object can have astart andend property to define a range of disabled times, or it can be a single time string to disable that specific time. The time can be in any format supported astimeFormat , in ISO 8601 time string format (HH:MM:SS) or as a JavaScript Date object.

Interactive example

Web component

React

Show full code

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

<IcTimeInput
id="time-input-default-disable-time"
label="What time would you like to collect your coffee?"
disableTimes={[
{
        start:"08:00",
        end:"10:00",
},
"13:20",
]}
/>

Time period

Interactive example

Web component

React

Show full code

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

<IcTimeInputlabel="What time would you like to collect your coffee?"timePeriod="12"/>

Time format (HH:MM)

Interactive example

Web component

React

Show full code

<ic-time-inputlabel="What time would you like to collect your coffee?"time-format="HH:MM"></ic-time-input>

<IcTimeInputlabel="What time would you like to collect your coffee?"timeFormat="HH:MM"/>

Min and max

It is possible to set a minimum and maximum time range using themin andmax props. If a time is set and it is earlier the minimum or later the maximum time, a validation error will appear.

Themin andmax props accept the same time formats as thevalue prop.

Interactive example

Web component

React

Show full code

<ic-time-input
label="What time would you like to collect your coffee?"
min="08:00:00"
max="16:00:00"
></ic-time-input>

<IcTimeInput
label="What time would you like to collect your coffee?"
min="08:00:00"
max="16:00:00"
/>

Form

Interactive example

Web component

React

Show full code

<formclass="parent-form">
<ic-time-input
label="What time would you like to collect your coffee?"
value="13:45:00"
></ic-time-input>
<divclass="button-container">
<ic-buttontype="submit"value="Submit"></ic-button>
<ic-buttontype="reset"value="Reset"></ic-button>
</div>
</form>

constformSubmit=(ev)=>{
  ev.preventDefault();
console.log(ev);
};
return(
<formonSubmit={formSubmit}className={classes.parentForm}>
<IcTimeInput
label="What time would you like to collect your coffee?"
value="13:45:00"
/>
<divclassName={classes.buttonContainer}>
<IcButtontype="submit">Submit</IcButton>
<IcButtontype="reset">Reset</IcButton>
</div>
</form>
)

With clearing value

The time input can be cleared by setting thevalue attribute to one of the following:

empty string
null
undefined

Interactive example

Update time

Set null

Set empty string

Set undefined

Web component

React

Show full code

<ic-time-input
id="time-input-clear-value"
label="What time would you like to collect your coffee?"
value="08:30:00"
></ic-time-input>
<divclass="button-container">
<ic-buttonid="update">Update date</ic-button>
<ic-buttonid="null-btn">Set null</ic-button>
<ic-buttonid="empty-btn">Set empty string</ic-button>
<ic-buttonid="undef-btn">Set undefined</ic-button>
</div>

<IcTimeInput
label="What time would you like to collect your coffee?"
value={value}
/>
<divclassName={classes.buttonContainer}>
<IcButtononClick={()=>handleUpdate()}>Update time</IcButton>
<IcButtononClick={()=>handleClearValue(null)}>Set null</IcButton>
<IcButtononClick={()=>handleClearValue("")}>
    Set empty string
</IcButton>
<IcButtononClick={()=>handleClearValue(undefined)}>
    Set undefined
</IcButton>
</div>

Last reviewed 20 August 2025 .