HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Time PickerView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA control for choosing a time from a list or from wheels.StableSince 0.1.0FormsUsageimport'@fusion.dev/helix/time-picker'import'@fusion.dev/helix-headless/time-picker'Preview
API ReferenceRoothelix-time-pickerA control for choosing a time from a list or from wheels.
PropTypeDescriptionbadInputMessagestringDefault"{mode, select, single {Enter a time such as {example}.} other {Enter times such as {example}, separated by commas.}}"The validation message for a value that is not a time.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.emptyTextstringDefault"No times to choose from"What the list says when no time falls between min and max.feedbackstringDefault""A message under the picker, such as what is wrong with the answer.hintstringDefault""Help under the times, such as the hours a shop is open, read by screen
readers as the list's description. A message in feedback replaces it.hourCycle"h12"|"h23"The clock the times are written on: h12 for twelve hours with a
meridiem, h23 for twenty-four.hourLabelstringWhat the wheel of hours is called, read by screen readers.invalidbooleanDefaultfalseWhether the answer fails validation, marked on the controls a reader
answers with and as :state(invalid).labelstringDefault"Time"Accessible name for the list, which has no visible one of its own.localestringDefault""Language tag the times and the wheels' names are written in.manualbooleanDefaultfalseStops the arrow keys in the list from choosing each time they move to.
Enter, Space or a click chooses.maxstringDefault"23:59"Latest time offered, as HH:mm.meridiemLabelstringWhat the wheel of the half of the day is called, read by screen readers.
Its two options are written as the locale writes them, such as AM and PM.minstringDefault"00:00"Earliest time offered, as HH:mm.minuteLabelstringWhat the wheel of minutes is called, read by screen readers.mode"multiple"|"range"How many times can be held at once.namestringDefault""The name the control's value is submitted under.nowLabelstringDefault"Now"The words on the button that chooses the current time, drawn with
show-now.rangeOverflowMessagestringDefault"Choose a time at or before {max}."The validation message for a time after max. {max} is replaced with
max, written in locale.rangeUnderflowMessagestringDefault"Choose a time at or after {min}."The validation message for a time before min. {min} is replaced with
min, written in locale.readOnlybooleanDefaultfalseBlocks changes to the time. The value is still submitted with the form.requiredbooleanDefaultfalseStops the form from submitting while no time is chosen.secondLabelstringWhat the wheel of seconds is called, read by screen readers.secondsbooleanDefaultfalseWhether times carry their seconds.showNowbooleanDefaultfalseDraws a button under the times that chooses the current time, as
selectNow() does.stepnumberDefault15How far apart the offered times are, in minutes, or in seconds with
seconds.stepMismatchMessagestringDefault"Choose one of the times on offer."The validation message for a time that step skips.timeContent((time: string, written: string) => unknown)What each time in the list shows: a function given the time as HH:mm,
or HH:mm:ss with seconds, and the time as the row writes it, that
returns text, an element or a Lit template.unavailableMessagestringDefault"Choose a time that is available."The validation message for a time that disable-times bars.valuestringThe control's current value, which its form submits.valueAsDateDate|nullThe value as a Date on 1 January 1970 UTC, or null while there is no time.valueAsNumbernumberThe value as milliseconds since midnight, or NaN while there is no time.valueMissingMessagestringDefault"Choose a time."The validation message for a required time picker with no time chosen.variant"list"|"wheels"Shows the times as one list, or as wheels with 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.
SlotDescriptionemptyWhat the list shows when no time falls between min and max, for content richer than empty-text.hintHelp under the times, for content richer than the hint text.labelA visible label above the times, which names the list, for content richer than the label text.
EventTypeDescriptionchangeEventFired after the value changes.helix-before-changeHelixBeforeChangeEventFired before the time changes, and cancelable. Canceling it keeps the current time.inputEventFired after the value changes.
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) => voidMoves focus to the control, as focusing a native control does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.requestValue(next: string) => booleanRequests a new value, and returns whether the change was applied.reveal() => voidScrolls each wheel to its selected value, and the list to its selected
time.selectNow() => booleanChooses the current time, as a press on the show-now button does, and
returns whether the value changed.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.
PartDescriptioncolumnOne column of the wheels.column-emptyThe text shown when the filter hides every option.column-errorA wheel's error part, which Time Picker never sets: its times do not load.column-feedbackThe message that says what is wrong with the value.column-filter-iconThe icon beside the filter field.column-filter-markThe default icon beside the filter field, shown when none is slotted.column-hintHelp under the list.column-itemsThe list of options.column-labelThe label above the list.column-liveA copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.column-loadingThe text shown while the options load.column-searchThe region that holds the filter field.column-search-fieldThe filter field.columnsThe row of columns, in wheels.feedbackThe message under the times, while feedback is set.hintHelp under the times, shown while there is no message in feedback.labelThe visible label above the times, drawn while a label is slotted.listThe listbox holding the times, in list.list-emptyThe text shown when the filter hides every option.list-errorThe list's error part, which Time Picker never sets: its times do not load.list-feedbackThe message that says what is wrong with the value.list-filter-iconThe icon beside the filter field.list-filter-markThe default icon beside the filter field, shown when none is slotted.list-hintHelp under the list.list-itemsThe list of options.list-labelThe label above the list.list-liveA copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.list-loadingThe text shown while the options load.list-searchThe region that holds the filter field.list-search-fieldThe filter field.nowThe button that chooses the current time, drawn with show-now.optionOne time in the list. It carries data-between inside a range, and inside the run to the time under the pointer while a range waits for its second end.option-betweenA time inside a chosen range, excluding its ends, beside option.option-descriptionThe caption under the time's label, when there is one.option-itemThe row.option-item-activeThe row the keyboard is on.option-item-selectedThe row of a chosen time: the one time, or either end of a range.option-labelThe time's label.option-textThe label and the caption, as one column.
CSS PropertyDescription--time-picker-columns-gapThe space between the wheels. None by default.--time-picker-feedback-colorThe color of the message under the times, while feedback is set.--time-picker-hover-background-colorFill on a wheel's row under the pointer or the keyboard.--time-picker-invalid-colorThe ring around the chosen time, or around the times while nothing is chosen, while the picker is invalid.--time-picker-list-block-sizeHow tall the list is before it scrolls.--time-picker-mark-radiusThe corners of the mark on a wheel's row.--time-picker-now-colorThe ink of the button that chooses the current time, with show-now.--time-picker-range-colorFill behind the times inside a range.--time-picker-row-sizeHeight and minimum width of one row in a wheel.--time-picker-selected-colorFill on the chosen row of a wheel.--time-picker-selected-foreground-colorInk on the chosen row of a wheel.--time-picker-wheel-block-sizeHow tall a wheel is. Five rows by default.--time-picker-wheel-maskThe mask that fades a wheel toward its ends, as a mask-image. Set none for no fade.
Custom stateDescriptionblankWhile no time is chosen.invalidWhile invalid is set, feedback says what is wrong, or the list carries aria-invalid.range-pendingWhile a range holds its first time and waits for the second.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-time-pickerA control for choosing a time from a list or from wheels.
PropTypeDescriptionbadInputMessagestringDefault"{mode, select, single {Enter a time such as {example}.} other {Enter times such as {example}, separated by commas.}}"The validation message for a value that is not a time.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.emptyTextstringDefault"No times to choose from"What the list says when no time falls between min and max.feedbackstringDefault""A message under the picker, such as what is wrong with the answer.hintstringDefault""Help under the times, such as the hours a shop is open, read by screen
readers as the list's description. A message in feedback replaces it.hourCycle"h12"|"h23"The clock the times are written on: h12 for twelve hours with a
meridiem, h23 for twenty-four.hourLabelstringWhat the wheel of hours is called, read by screen readers.invalidbooleanDefaultfalseWhether the answer fails validation, marked on the controls a reader
answers with and as :state(invalid).labelstringDefault"Time"Accessible name for the list, which has no visible one of its own.localestringDefault""Language tag the times and the wheels' names are written in.manualbooleanDefaultfalseStops the arrow keys in the list from choosing each time they move to.
Enter, Space or a click chooses.maxstringDefault"23:59"Latest time offered, as HH:mm.meridiemLabelstringWhat the wheel of the half of the day is called, read by screen readers.
Its two options are written as the locale writes them, such as AM and PM.minstringDefault"00:00"Earliest time offered, as HH:mm.minuteLabelstringWhat the wheel of minutes is called, read by screen readers.mode"multiple"|"range"How many times can be held at once.namestringDefault""The name the control's value is submitted under.nowLabelstringDefault"Now"The words on the button that chooses the current time, drawn with
show-now.rangeOverflowMessagestringDefault"Choose a time at or before {max}."The validation message for a time after max. {max} is replaced with
max, written in locale.rangeUnderflowMessagestringDefault"Choose a time at or after {min}."The validation message for a time before min. {min} is replaced with
min, written in locale.readOnlybooleanDefaultfalseBlocks changes to the time. The value is still submitted with the form.requiredbooleanDefaultfalseStops the form from submitting while no time is chosen.secondLabelstringWhat the wheel of seconds is called, read by screen readers.secondsbooleanDefaultfalseWhether times carry their seconds.showNowbooleanDefaultfalseDraws a button under the times that chooses the current time, as
selectNow() does.stepnumberDefault15How far apart the offered times are, in minutes, or in seconds with
seconds.stepMismatchMessagestringDefault"Choose one of the times on offer."The validation message for a time that step skips.timeContent((time: string, written: string) => unknown)What each time in the list shows: a function given the time as HH:mm,
or HH:mm:ss with seconds, and the time as the row writes it, that
returns text, an element or a Lit template.unavailableMessagestringDefault"Choose a time that is available."The validation message for a time that disable-times bars.valuestringThe control's current value, which its form submits.valueAsDateDate|nullThe value as a Date on 1 January 1970 UTC, or null while there is no time.valueAsNumbernumberThe value as milliseconds since midnight, or NaN while there is no time.valueMissingMessagestringDefault"Choose a time."The validation message for a required time picker with no time chosen.variant"list"|"wheels"Shows the times as one list, or as wheels with 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.
SlotDescriptionemptyWhat the list shows when no time falls between min and max, for content richer than empty-text.hintHelp under the times, for content richer than the hint text.labelA visible label above the times, which names the list, for content richer than the label text.
EventTypeDescriptionchangeEventFired after the value changes.helix-before-changeHelixBeforeChangeEventFired before the time changes, and cancelable. Canceling it keeps the current time.inputEventFired after the value changes.
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) => voidMoves focus to the list, or to the first wheel.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.requestValue(next: string) => booleanRefuses every change while read-only. See readOnly.reveal() => voidScrolls each wheel to its selected value, and the list to its selected
time.selectNow() => booleanChooses the current time, as a press on the show-now button does, and
returns whether the value changed.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.
PartDescriptioncolumnOne column of the wheels.column-emptyThe text shown when the filter hides every option.column-errorA wheel's error part, which Time Picker never sets: its times do not load.column-feedbackThe message that says what is wrong with the value.column-filter-iconThe icon beside the filter field.column-filter-markThe default icon beside the filter field, shown when none is slotted.column-hintHelp under the list.column-itemsThe list of options.column-labelThe label above the list.column-liveA copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.column-loadingThe text shown while the options load.column-searchThe region that holds the filter field.column-search-fieldThe filter field.columnsThe row of columns, in wheels.feedbackThe message under the times, while feedback is set.hintHelp under the times, shown while there is no message in feedback.labelThe visible label above the times, drawn while a label is slotted.listThe listbox holding the times, in list.list-emptyThe text shown when the filter hides every option.list-errorThe list's error part, which Time Picker never sets: its times do not load.list-feedbackThe message that says what is wrong with the value.list-filter-iconThe icon beside the filter field.list-filter-markThe default icon beside the filter field, shown when none is slotted.list-hintHelp under the list.list-itemsThe list of options.list-labelThe label above the list.list-liveA copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.list-loadingThe text shown while the options load.list-searchThe region that holds the filter field.list-search-fieldThe filter field.nowThe button that chooses the current time, drawn with show-now.optionOne time in the list. It carries data-between inside a range, and inside the run to the time under the pointer while a range waits for its second end.option-betweenA time inside a chosen range, excluding its ends, beside option.option-descriptionThe caption under the time's label, when there is one.option-itemThe row.option-item-activeThe row the keyboard is on.option-item-selectedThe row of a chosen time: the one time, or either end of a range.option-labelThe time's label.option-textThe label and the caption, as one column.
Custom stateDescriptionblankWhile no time is chosen.invalidWhile invalid is set, feedback says what is wrong, or the list carries aria-invalid.range-pendingWhile a range holds its first time and waits for the second.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionBoundedWorking hours only, at half-hour steps.Disable TimesA range of times with some times blocked from being chosen.DisabledA disabled time picker, which shows its time and cannot be changed.EventsChoosing a time from a list is one step, so each choice sends helix-before-change, input, and change.InvalidA time picker marked invalid, with its chosen time.NowA button under the times that chooses the current time.PreviewHours and minutes, with a time already chosen.PreviewHours and minutes, with a time already chosen.RangeA start and an end in one picker.WheelsThe time picker as wheels, with a column for each part of the time.