HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Time InputView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA field for a time, typed or picked from a list.StableSince 0.1.0FormsUsageimport'@fusion.dev/helix/time-input'import'@fusion.dev/helix-headless/time-input'Preview
API ReferenceRoothelix-time-inputA field for a time, typed or picked from a list.
PropTypeDescriptionautocompletestringDefault""What the browser may autofill here, as one of the platform's own tokens.badInputMessagestringThe message shown when the field holds text the picker cannot read as a
date, a time, or a color.clearablebooleanDefaultfalseWhether the field shows a button that empties it, as Input's clearable
does. Shown only while the field holds something to clear and is neither
disabled nor read-only.clearLabelstringDefault"Clear"The accessible name of the clear button, which shows only an icon.collapseLabelstringDefault"Show fewer"The button's label, read by screen readers, once every token is showing.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.defaultValuestringDefault""The value the control starts with. A form reset returns it to this value,
and to the value attribute where this one is not written, as a native
control resets to the value it declares.disabledbooleanDefaultfalseWhether the control is disabled and cannot be used.disableTimesstringDefault""Times that cannot be chosen, as HH:mm, separated by commas or spaces.emptyMessagestringDefault"{kind, select, date {Enter a date.} other {Enter a time.}}"What a row of segments reports when the field is required and every
segment is empty, where value-missing-message is not set. {kind} is
date or time.emptySegmentLabelstringDefault"Empty"What a screen reader hears for a segment with nothing in it, which a
sighted reader sees as dashes.expandablebooleanDefaultfalseWhether the count is a button that shows the hidden tokens.expandLabelstringDefault"Show all"The count button's label, read by screen readers. Its visible text, such
as +3, does not say what it does.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.hintstringDefault""Help text shown under the control. A validation message replaces it.hourCycle"h12"|"h23"The clock the times are written on: h12 for twelve hours with a
meridiem, h23 for twenty-four. Absent is the locale's own.incompleteMessagestringDefault"{kind, select, date {Enter a whole date.} other {Enter a whole time.}}"What a row of segments reports while some segments are set and others
are not, where bad-input-message is not set. {kind} is date or
time.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.localestringDefault""Language tag the times are written in.maxstringDefault"23:59"Latest time that can be chosen, as HH:mm.maxTagsnumberDefault0How many tokens to show before the rest become a count.minstringDefault"00:00"Earliest time that can be chosen, as HH:mm.mode"multiple"|"range"How many times the field holds at once.namestringDefault""The name the control's value is submitted under.nowLabelstringDefault"Now"The words on the list's button that chooses the current time, drawn with
show-now.openbooleanWhether the element is open.placeholderstringDefault"HH:mm"Placeholder text shown before a time is entered.rangeEndLabelstringDefault"End"What a screen reader hears before the segments of a range's second date
or time, after each segment's own name.rangeLengthMessagestringDefault"A range is two times."The message shown when a range holds more than two times.rangeOverflowMessagestringDefault"Choose a time at or before {max}."The message shown when a time is after max, with {max} filled in as
the field displays it.rangeStartLabelstringDefault"Start"What a screen reader hears before the segments of a range's first date
or time, after each segment's own name: "month, Start, Stay".rangeUnderflowMessagestringDefault"Choose a time at or after {min}."The message shown when a time is before min, with {min} filled in as
the field displays it.readOnlybooleanDefaultfalseWhether the value is locked. A read-only control still submits its value.removeLabelstringDefault"Remove {name}"The name of the button that removes one time, with {name} filled in.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.restTextstringDefault"+{count}"The count of the tokens past max-tags, as it is shown, with {count}
for the number, written in the element's locale.secondsbooleanDefaultfalseWhether times carry their seconds: the value is HH:mm:ss, a typed time
may give them, the field writes them, and the list's step counts seconds.
See Time Picker's seconds.segmentedbooleanDefaultfalseWhether the field is a row of segments, one for each part of the date or
time, in place of a line of text.showNowbooleanDefaultfalseDraws a button under the times in the list that chooses the current time,
moved to the nearest time on offer. See Time Picker's show-now. Its words
are now-label.stepnumberDefault15How far apart the offered times are, in minutes, or in seconds with
seconds.timeStyle"iso"|"local"Default"local"Whether the field shows the time in the local style or as the value
itself.triggerLabelstringDefault"Choose a time"The name of the button that opens the list, read by screen readers.unavailableMessagestringDefault"Choose a time that is available."The message shown when disable-times bars a time.unreadableMessagestringDefault"{mode, select, single {Enter a time such as {example}.} other {Enter times such as {example}, separated by commas.}}"The message for text that is no time, where bad-input-message is not
set. {mode} is single, range, or multiple, {example} is a time
written as the field writes one, 2:30 PM in en-US and 14:30 in
de-DE, and {shape} is HH:mm, or HH:mm:ss with seconds.valuestringThe control's current value, which its form submits.valueAsDateDate|nullThe value as a Date on January 1, 1970 UTC, or null while there is no
time.valueAsNumbernumberThe value as milliseconds since midnight, or NaN while there is no time.valueMissingMessagestringThe message shown when the field is required and empty.variant"list"|"wheels"Whether the panel shows one list of times or a column for each part of the
time.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescriptionclear-iconReplaces the cross on the clear button, under clearable.endContent after the time, before the trigger, such as a clear button.feedbackThe message that says what is wrong with the value.hintHelp under the field.labelThe label, for content richer than the label text.panel-footerContent in the panel under the times, such as a note or an action.panel-headerContent in the panel above the times, such as a heading or a shortcut.startContent before the time, such as an icon.triggerThe icon on the field that shows a list opens.
EventTypeDescriptionchangeEventFired after the value changes.helix-before-changeHelixBeforeChangeEventFired before the time changes. Cancelable: canceling it stops the change and leaves the decision to you.helix-before-closeHelixBeforeCloseEventFired before the list closes. Cancelable: canceling it keeps the list open and leaves the decision to you.helix-before-openHelixBeforeOpenEventFired before the list opens. Cancelable: canceling it keeps the list closed and leaves the decision to you.helix-clearHelixClearEventFired after the clear button has emptied the field, after input and change.inputEventFired after the value changes.toggleToggleEventFired after the list opens or closes, with newState and oldState.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidPuts the caret in the field, as clicking its label does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.requestOpen(next: boolean) => booleanRequests the panel open or closed. While readOnly is set, it does not
open, and it returns false.requestValue(next: string) => booleanRequests a new value. While readOnly is set, nothing changes and it
returns false.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionclearThe button that empties the field, under clearable, while it holds a time.controlThe text input.feedbackThe message that says what is wrong with the value.fieldThe box that holds the text and the trigger.hintHelp under the field, while nothing is wrong.labelThe label above the field.literalThe text the locale writes between two segments, such as a colon, in segmented.pickerThe time picker inside the panel.picker-columnOne column of the picker.picker-column-emptyThe text shown when the filter hides every option.picker-column-errorA wheel's error part, which the list never sets: its times do not load.picker-column-feedbackThe column's message that says what is wrong with the value.picker-column-filter-iconThe icon beside the filter field.picker-column-filter-markThe default icon beside the filter field, shown when none is slotted.picker-column-hintHelp under the list.picker-column-itemsThe list of options.picker-column-labelThe label above the list.picker-column-liveThe inner column's live part, the region screen readers announce its empty and loading text from.picker-column-loadingThe text shown while the options load.picker-column-searchThe region that holds the filter field.picker-column-search-fieldThe filter field.picker-columnsThe row of columns, in wheels.picker-feedbackThe picker's own message, under the times, while the picker's feedback is set.picker-hintThe picker's hint, which Time Input never sets: help under the field is the field's own hint.picker-labelThe picker's visible label, which Time Input never draws: the field's label names it.picker-listThe listbox holding the times, in list.picker-list-emptyThe text shown when the filter hides every option.picker-list-errorThe list's error part, which the list never sets: its times do not load.picker-list-feedbackThe inner list's message that says what is wrong with the value.picker-list-filter-iconThe icon beside the filter field.picker-list-filter-markThe default icon beside the filter field, shown when none is slotted.picker-list-hintHelp under the list.picker-list-itemsThe list of options.picker-list-labelThe label above the list.picker-list-liveThe inner list's live part, the region screen readers announce its empty and loading text from.picker-list-loadingThe text shown while the options load.picker-list-searchThe region that holds the filter field.picker-list-search-fieldThe filter field.picker-nowThe picker's button that chooses the current time, which Time Input does not draw.picker-optionOne time in the picker. Carries data-between inside a range.picker-option-betweenA time inside a chosen range, between its two ends. Set together with picker-option.picker-option-descriptionThe caption under the label, when there is one.picker-option-itemThe row.picker-option-item-activeThe row the keyboard is on.picker-option-item-selectedThe row of a chosen time: the one time, or either end of a range.picker-option-labelThe option's label.picker-option-textThe label and the caption, as one column.range-separatorThe dash between a range's two rows of segments, in segmented, beside literal.restThe count of times held beyond the ones shown. A <button> with expandable, and a <span> without it.segmentOne part of the time, an hour, a minute, a second or AM and PM, in segmented.segment-placeholderA segment with nothing in it yet. Applied with segment.segmentsThe row of segments that holds the time, in segmented.surfaceThe floating panel.tagsThe row the times sit in.timeOne held time, as a tag, in multiple.time-cellThe tag's grid cell, which a tag draws only inside a tag group.time-dismissThe remove button, when dismissible.time-dismiss-markThe default icon on the remove button, shown when none is slotted.time-labelThe label, trimmed to its capitals and baseline.time-linkThe tag's link around its label, which a tag draws only with href.time-startThe category before the label.triggerThe control that opens the list.trigger-iconThe icon on the button that opens the clock.
CSS PropertyDescription--time-input-background-colorFill behind the field.--time-input-border-colorColor of the panel's edge.--time-input-border-widthWidth of the panel's edge. Defaults to --helix-border-floating, which is 0, so the panel stands out by its shadow unless your theme sets a width.--time-input-segment-focus-background-colorThe fill behind the segment with focus, in segmented. It follows --helix-color-primary-surface.--time-input-segment-focus-colorThe text of the segment with focus, in segmented.--time-input-segment-literal-colorThe text the locale writes between two segments, in segmented.--time-input-segment-placeholder-colorThe dashes of a segment with nothing in it, in segmented. It matches the text field's placeholder.--time-input-shadowShadow under the panel. Defaults to --helix-shadow-floating, because the panel can sit over any content.
Custom stateDescriptionblankThe field holds no time.invalidThe control has an error to show, from the browser's validation or from your feedback.openWhile the clock is open.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-time-inputA field for a time, typed or picked from a list.
PropTypeDescriptionautocompletestringDefault""What the browser may autofill here, as one of the platform's own tokens.badInputMessagestringThe message shown when the field holds text the picker cannot read as a
date, a time, or a color.clearablebooleanDefaultfalseWhether the field shows a button that empties it, as Input's clearable
does. Shown only while the field holds something to clear and is neither
disabled nor read-only.clearLabelstringDefault"Clear"The accessible name of the clear button, which shows only an icon.collapseLabelstringDefault"Show fewer"The button's label, read by screen readers, once every token is showing.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.defaultValuestringDefault""The value the control starts with. A form reset returns it to this value,
and to the value attribute where this one is not written, as a native
control resets to the value it declares.disabledbooleanDefaultfalseWhether the control is disabled and cannot be used.disableTimesstringDefault""Times that cannot be chosen, as HH:mm, separated by commas or spaces.emptyMessagestringDefault"{kind, select, date {Enter a date.} other {Enter a time.}}"What a row of segments reports when the field is required and every
segment is empty, where value-missing-message is not set. {kind} is
date or time.emptySegmentLabelstringDefault"Empty"What a screen reader hears for a segment with nothing in it, which a
sighted reader sees as dashes.expandablebooleanDefaultfalseWhether the count is a button that shows the hidden tokens.expandLabelstringDefault"Show all"The count button's label, read by screen readers. Its visible text, such
as +3, does not say what it does.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.hintstringDefault""Help text shown under the control. A validation message replaces it.hourCycle"h12"|"h23"The clock the times are written on: h12 for twelve hours with a
meridiem, h23 for twenty-four. Absent is the locale's own.incompleteMessagestringDefault"{kind, select, date {Enter a whole date.} other {Enter a whole time.}}"What a row of segments reports while some segments are set and others
are not, where bad-input-message is not set. {kind} is date or
time.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.localestringDefault""Language tag the times are written in.maxstringDefault"23:59"Latest time that can be chosen, as HH:mm.maxTagsnumberDefault0How many tokens to show before the rest become a count.minstringDefault"00:00"Earliest time that can be chosen, as HH:mm.mode"multiple"|"range"How many times the field holds at once.namestringDefault""The name the control's value is submitted under.nowLabelstringDefault"Now"The words on the list's button that chooses the current time, drawn with
show-now.openbooleanWhether the element is open.placeholderstringDefault"HH:mm"Placeholder text shown before a time is entered.rangeEndLabelstringDefault"End"What a screen reader hears before the segments of a range's second date
or time, after each segment's own name.rangeLengthMessagestringDefault"A range is two times."The message shown when a range holds more than two times.rangeOverflowMessagestringDefault"Choose a time at or before {max}."The message shown when a time is after max, with {max} filled in as
the field displays it.rangeStartLabelstringDefault"Start"What a screen reader hears before the segments of a range's first date
or time, after each segment's own name: "month, Start, Stay".rangeUnderflowMessagestringDefault"Choose a time at or after {min}."The message shown when a time is before min, with {min} filled in as
the field displays it.readOnlybooleanDefaultfalseWhether the value is locked. A read-only control still submits its value.removeLabelstringDefault"Remove {name}"The name of the button that removes one time, with {name} filled in.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.restTextstringDefault"+{count}"The count of the tokens past max-tags, as it is shown, with {count}
for the number, written in the element's locale.secondsbooleanDefaultfalseWhether times carry their seconds: the value is HH:mm:ss, a typed time
may give them, the field writes them, and the list's step counts seconds.
See Time Picker's seconds.segmentedbooleanDefaultfalseWhether the field is a row of segments, one for each part of the date or
time, in place of a line of text.showNowbooleanDefaultfalseDraws a button under the times in the list that chooses the current time,
moved to the nearest time on offer. See Time Picker's show-now. Its words
are now-label.stepnumberDefault15How far apart the offered times are, in minutes, or in seconds with
seconds.timeStyle"iso"|"local"Default"local"Whether the field shows the time in the local style or as the value
itself.triggerLabelstringDefault"Choose a time"The name of the button that opens the list, read by screen readers.unavailableMessagestringDefault"Choose a time that is available."The message shown when disable-times bars a time.unreadableMessagestringDefault"{mode, select, single {Enter a time such as {example}.} other {Enter times such as {example}, separated by commas.}}"The message for text that is no time, where bad-input-message is not
set. {mode} is single, range, or multiple, {example} is a time
written as the field writes one, 2:30 PM in en-US and 14:30 in
de-DE, and {shape} is HH:mm, or HH:mm:ss with seconds.valuestringThe control's current value, which its form submits.valueAsDateDate|nullThe value as a Date on January 1, 1970 UTC, or null while there is no
time.valueAsNumbernumberThe value as milliseconds since midnight, or NaN while there is no time.valueMissingMessagestringThe message shown when the field is required and empty.variant"list"|"wheels"Whether the panel shows one list of times or a column for each part of the
time.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescriptionclear-iconReplaces the cross on the clear button, under clearable.endContent after the time, before the trigger, such as a clear button.feedbackThe message that says what is wrong with the value.hintHelp under the field.labelThe label, for content richer than the label text.panel-footerContent in the panel under the times, such as a note or an action.panel-headerContent in the panel above the times, such as a heading or a shortcut.startContent before the time, such as an icon.triggerThe icon on the field that shows a list opens.
EventTypeDescriptionchangeEventFired after the value changes.helix-before-changeHelixBeforeChangeEventFired before the time changes. Cancelable: canceling it stops the change and leaves the decision to you.helix-before-closeHelixBeforeCloseEventFired before the list closes. Cancelable: canceling it keeps the list open and leaves the decision to you.helix-before-openHelixBeforeOpenEventFired before the list opens. Cancelable: canceling it keeps the list closed and leaves the decision to you.helix-clearHelixClearEventFired after the clear button has emptied the field, after input and change.inputEventFired after the value changes.toggleToggleEventFired after the list opens or closes, with newState and oldState.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidPuts the caret in the field, as clicking its label does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.requestOpen(next: boolean) => booleanRequests the panel open or closed. While readOnly is set, it does not
open, and it returns false.requestValue(next: string) => booleanRequests a new value. While readOnly is set, nothing changes and it
returns false.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionclearThe button that empties the field, under clearable, while it holds a time.controlThe text input.feedbackThe message that says what is wrong with the value.fieldThe box that holds the text and the trigger.hintHelp under the field, while nothing is wrong.labelThe label above the field.literalThe text the locale writes between two segments, such as a colon, in segmented.pickerThe time picker inside the panel.picker-columnOne column of the picker.picker-column-emptyThe text shown when the filter hides every option.picker-column-errorA wheel's error part, which the list never sets: its times do not load.picker-column-feedbackThe column's message that says what is wrong with the value.picker-column-filter-iconThe icon beside the filter field.picker-column-filter-markThe default icon beside the filter field, shown when none is slotted.picker-column-hintHelp under the list.picker-column-itemsThe list of options.picker-column-labelThe label above the list.picker-column-liveThe inner column's live part, the region screen readers announce its empty and loading text from.picker-column-loadingThe text shown while the options load.picker-column-searchThe region that holds the filter field.picker-column-search-fieldThe filter field.picker-columnsThe row of columns, in wheels.picker-feedbackThe picker's own message, under the times, while the picker's feedback is set.picker-hintThe picker's hint, which Time Input never sets: help under the field is the field's own hint.picker-labelThe picker's visible label, which Time Input never draws: the field's label names it.picker-listThe listbox holding the times, in list.picker-list-emptyThe text shown when the filter hides every option.picker-list-errorThe list's error part, which the list never sets: its times do not load.picker-list-feedbackThe inner list's message that says what is wrong with the value.picker-list-filter-iconThe icon beside the filter field.picker-list-filter-markThe default icon beside the filter field, shown when none is slotted.picker-list-hintHelp under the list.picker-list-itemsThe list of options.picker-list-labelThe label above the list.picker-list-liveThe inner list's live part, the region screen readers announce its empty and loading text from.picker-list-loadingThe text shown while the options load.picker-list-searchThe region that holds the filter field.picker-list-search-fieldThe filter field.picker-nowThe picker's button that chooses the current time, which Time Input does not draw.picker-optionOne time in the picker. Carries data-between inside a range.picker-option-betweenA time inside a chosen range, between its two ends. Set together with picker-option.picker-option-descriptionThe caption under the label, when there is one.picker-option-itemThe row.picker-option-item-activeThe row the keyboard is on.picker-option-item-selectedThe row of a chosen time: the one time, or either end of a range.picker-option-labelThe option's label.picker-option-textThe label and the caption, as one column.range-separatorThe dash between a range's two rows of segments, in segmented, beside literal.restThe count of times held beyond the ones shown. A <button> with expandable, and a <span> without it.segmentOne part of the time, an hour, a minute, a second or AM and PM, in segmented.segment-placeholderA segment with nothing in it yet. Applied with segment.segmentsThe row of segments that holds the time, in segmented.surfaceThe floating panel.tagsThe row the times sit in.timeOne held time, as a tag, in multiple.time-cellThe tag's grid cell, which a tag draws only inside a tag group.time-dismissThe remove button, when dismissible.time-dismiss-markThe default icon on the remove button, shown when none is slotted.time-labelThe label, trimmed to its capitals and baseline.time-linkThe tag's link around its label, which a tag draws only with href.time-startThe category before the label.triggerThe control that opens the list.trigger-iconThe icon on the button that opens the clock.
Custom stateDescriptionblankThe field holds no time.invalidThe control has an error to show, from the browser's validation or from your feedback.openWhile the clock is open.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionBoundedA time limited to a range, changing in set steps.DisabledA disabled field with a time in it.EventsA typed time and a time chosen from the wheels send the same events.InvalidA time outside the allowed range, and the message the field shows.IsoA time input that shows its value in the ISO style, such as 14:30.MultipleSeveral times in one field, each as a tag.PreviewA field that takes a typed time or one from the wheels it opens.PreviewA field that takes a typed time or one from the wheels it opens.RangeA start and an end time, chosen together in one field.SegmentedA time set one part at a time, with AM and PM where the clock has them.WheelsThe picker drawn as wheels, as on a phone.