HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Time InputView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA time, typed or picked from a list.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/time-input'import'@fusion.dev/helix-headless/time-input'Preview
API ReferenceRoothelix-time-inputA time, typed or picked from a list.
PropTypeDefaultDescriptionautocompletestring""What the browser may autofill here, as one of the platform's own tokens.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.localestring""Language tag the times are written in.maxstring"23:59"Latest time that can be chosen, as `HH:mm`.maxTagsnumber0How many times are shown as tags before the rest are counted, in `multiple`.minstring"00:00"Earliest time that can be chosen, as `HH:mm`.mode"multiple"|"range"How many times can be held at once.namestring""Name submitted with the form.openbooleanWhether the element is open.placeholderstring"HH:mm"What the field says before a time is in it.readOnlybooleanfalseWhether the control refuses changes while still submitting its value.requiredbooleanfalseWhether the form refuses to submit without it.stepnumber15How far apart the offered times are, in minutes.timeStyle"iso"|"local""local"Whether the field writes the time out, or holds the value as it is.triggerLabelstring"Choose a time"Accessible name for the control that opens the list.valuestringWhat the control holds now, and what 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.variant"list"|"wheels"Whether the panel is one list of times or a column each.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionfeedbackWhat is wrong with it.hintHelp under the field.triggerThe mark on the field saying a list opens.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the time changes. Cancelable: refusing it takes the decision and nothing moves.helix-before-closeHelixBeforeCloseEventFired before it closes. Cancelable: refusing it takes the decision and nothing moves.helix-before-openHelixBeforeOpenEventFired before the list opens. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the caret in the field, the way a label pointing at one would.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontrolThe text input.feedbackWhat is wrong with it.fieldThe box holding the text and the trigger.hintHelp under the field, while nothing is wrong.labelThe question, over the field.pickerThe list inside it.picker-columnOne of them.picker-column-emptyShown when a filter has hidden everything.picker-column-feedbackWhat is wrong with it.picker-column-filter-iconThe mark beside that field.picker-column-filter-markThe glyph beside the filter field, where none is slotted.picker-column-hintHelp under the list.picker-column-itemsThe list itself.picker-column-labelThe question, over the list.picker-column-loadingShown while the options are still on their way.picker-column-searchThe region holding the field that narrows the list.picker-column-search-fieldThe field itself.picker-columnsThe row of columns, in `wheels`.picker-listThe listbox holding the times, in `list`.picker-list-emptyShown when a filter has hidden everything.picker-list-feedbackWhat is wrong with it.picker-list-filter-iconThe mark beside that field.picker-list-filter-markThe glyph beside the filter field, where none is slotted.picker-list-hintHelp under the list.picker-list-itemsThe list itself.picker-list-labelThe question, over the list.picker-list-loadingShown while the options are still on their way.picker-list-searchThe region holding the field that narrows the list.picker-list-search-fieldThe field itself.picker-optionOne time in it. Carries `data-between` inside a range.picker-option-descriptionThe caption under the words, when there is one.picker-option-itemThe row.picker-option-labelThe words.picker-option-textThe words and the caption, as one column.restHow many times are held beyond the ones shown.surfaceThe floating panel.timeOne held time, as a tag, in `multiple`.time-dismissThe remove button, when `dismissible`.time-dismiss-markThe glyph on the dismiss control, where none is slotted.time-prefixThe category before the label.triggerThe control that opens the list.trigger-iconThe mark 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. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise.--time-input-shadowLift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default.
Roothelix-headless-time-inputA time, typed or picked from a list.
PropTypeDefaultDescriptionautocompletestring""What the browser may autofill here, as one of the platform's own tokens.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.localestring""Language tag the times are written in.maxstring"23:59"Latest time that can be chosen, as `HH:mm`.maxTagsnumber0How many times are shown as tags before the rest are counted, in `multiple`.minstring"00:00"Earliest time that can be chosen, as `HH:mm`.mode"multiple"|"range"How many times can be held at once.namestring""Name submitted with the form.openbooleanWhether the element is open.placeholderstring"HH:mm"What the field says before a time is in it.readOnlybooleanfalseWhether the control refuses changes while still submitting its value.requiredbooleanfalseWhether the form refuses to submit without it.stepnumber15How far apart the offered times are, in minutes.timeStyle"iso"|"local""local"Whether the field writes the time out, or holds the value as it is.triggerLabelstring"Choose a time"Accessible name for the control that opens the list.valuestringWhat the control holds now, and what 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.variant"list"|"wheels"Whether the panel is one list of times or a column each.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionfeedbackWhat is wrong with it.hintHelp under the field.triggerThe mark on the field saying a list opens.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the time changes. Cancelable: refusing it takes the decision and nothing moves.helix-before-closeHelixBeforeCloseEventFired before it closes. Cancelable: refusing it takes the decision and nothing moves.helix-before-openHelixBeforeOpenEventFired before the list opens. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the caret in the field, the way a label pointing at one would.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.requestValue(next: string) => booleanRefuses every change while read-only. See `readOnly`.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontrolThe text input.feedbackWhat is wrong with it.fieldThe box holding the text and the trigger.hintHelp under the field, while nothing is wrong.labelThe question, over the field.pickerThe list inside it.picker-columnOne of them.picker-column-emptyShown when a filter has hidden everything.picker-column-feedbackWhat is wrong with it.picker-column-filter-iconThe mark beside that field.picker-column-filter-markThe glyph beside the filter field, where none is slotted.picker-column-hintHelp under the list.picker-column-itemsThe list itself.picker-column-labelThe question, over the list.picker-column-loadingShown while the options are still on their way.picker-column-searchThe region holding the field that narrows the list.picker-column-search-fieldThe field itself.picker-columnsThe row of columns, in `wheels`.picker-listThe listbox holding the times, in `list`.picker-list-emptyShown when a filter has hidden everything.picker-list-feedbackWhat is wrong with it.picker-list-filter-iconThe mark beside that field.picker-list-filter-markThe glyph beside the filter field, where none is slotted.picker-list-hintHelp under the list.picker-list-itemsThe list itself.picker-list-labelThe question, over the list.picker-list-loadingShown while the options are still on their way.picker-list-searchThe region holding the field that narrows the list.picker-list-search-fieldThe field itself.picker-optionOne time in it. Carries `data-between` inside a range.picker-option-descriptionThe caption under the words, when there is one.picker-option-itemThe row.picker-option-labelThe words.picker-option-textThe words and the caption, as one column.restHow many times are held beyond the ones shown.surfaceThe floating panel.timeOne held time, as a tag, in `multiple`.time-dismissThe remove button, when `dismissible`.time-dismiss-markThe glyph on the dismiss control, where none is slotted.time-prefixThe category before the label.triggerThe control that opens the list.trigger-iconThe mark on the button that opens the clock.
ExamplesNameDescriptionBoundedA time inside a window, moving in named steps.DisabledDisabled with a time in it.EventsA typed time and one taken from the wheels arrive the same way.InvalidA time outside the window, and what the field says about it.IsoThe same time written in each style, including with seconds.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, chosen as one gesture.WheelsThe picker drawn as wheels, which is what a phone expects.