HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Time PickerView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorPicks a time, from a list of them.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/time-picker'import'@fusion.dev/helix-headless/time-picker'Preview
API ReferenceRoothelix-time-pickerPicks a time, from a list of them.
PropTypeDefaultDescriptiondefaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.disableTimesstring""Times that cannot be chosen, comma separated, as `HH:mm`.invalidbooleanfalseWhether the current selection fails validation.labelstring"Time"Accessible name for the list, which has no visible one of its own.localestring""Language tag the times are written in.maxstring"23:59"Latest time offered, as `HH:mm`.minstring"00:00"Earliest time offered, as `HH:mm`.mode"multiple"|"range"How many times can be held at once.namestring""Name submitted with the form.readOnlybooleanfalseWhether the control refuses changes while still submitting its value.requiredbooleanfalseWhether the form refuses to submit while nothing is chosen.stepnumber15How far apart the offered times are, in minutes.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 times are one list 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.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the time changes. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the keyboard on the list, which is the only control here.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.reveal() => voidEach wheel comes to rest on its own answer.
PartDescriptioncolumnOne of them.column-emptyShown when a filter has hidden everything.column-feedbackWhat is wrong with it.column-filter-iconThe mark beside that field.column-filter-markThe glyph beside the filter field, where none is slotted.column-hintHelp under the list.column-itemsThe list itself.column-labelThe question, over the list.column-loadingShown while the options are still on their way.column-searchThe region holding the field that narrows the list.column-search-fieldThe field itself.columnsThe row of columns, in `wheels`.listThe listbox holding the times, in `list`.list-emptyShown when a filter has hidden everything.list-feedbackWhat is wrong with it.list-filter-iconThe mark beside that field.list-filter-markThe glyph beside the filter field, where none is slotted.list-hintHelp under the list.list-itemsThe list itself.list-labelThe question, over the list.list-loadingShown while the options are still on their way.list-searchThe region holding the field that narrows the list.list-search-fieldThe field itself.optionOne time in it. Carries `data-between` inside a range.option-descriptionThe caption under the words, when there is one.option-itemThe row.option-labelThe words.option-textThe words and the caption, as one column.
CSS PropertyDescription--time-picker-list-block-sizeHow tall the list is before it scrolls.--time-picker-range-colorWash behind the times inside a range.--time-picker-row-sizeHeight and least width of one row in a wheel.--time-picker-selected-colorFill on the chosen row of a wheel.--time-picker-wheel-block-sizeHow tall a wheel is. Five rows by default.
Roothelix-headless-time-pickerPicks a time, from a list of them.
PropTypeDefaultDescriptiondefaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.disableTimesstring""Times that cannot be chosen, comma separated, as `HH:mm`.invalidbooleanfalseWhether the current selection fails validation.labelstring"Time"Accessible name for the list, which has no visible one of its own.localestring""Language tag the times are written in.maxstring"23:59"Latest time offered, as `HH:mm`.minstring"00:00"Earliest time offered, as `HH:mm`.mode"multiple"|"range"How many times can be held at once.namestring""Name submitted with the form.readOnlybooleanfalseWhether the control refuses changes while still submitting its value.requiredbooleanfalseWhether the form refuses to submit while nothing is chosen.stepnumber15How far apart the offered times are, in minutes.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 times are one list 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.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the time changes. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the keyboard on the list, which is the only control here.requestValue(next: string) => booleanRefuses every change while read-only. See `readOnly`.reveal() => voidEach wheel comes to rest on its own answer.
PartDescriptioncolumnOne of them.column-emptyShown when a filter has hidden everything.column-feedbackWhat is wrong with it.column-filter-iconThe mark beside that field.column-filter-markThe glyph beside the filter field, where none is slotted.column-hintHelp under the list.column-itemsThe list itself.column-labelThe question, over the list.column-loadingShown while the options are still on their way.column-searchThe region holding the field that narrows the list.column-search-fieldThe field itself.columnsThe row of columns, in `wheels`.listThe listbox holding the times, in `list`.list-emptyShown when a filter has hidden everything.list-feedbackWhat is wrong with it.list-filter-iconThe mark beside that field.list-filter-markThe glyph beside the filter field, where none is slotted.list-hintHelp under the list.list-itemsThe list itself.list-labelThe question, over the list.list-loadingShown while the options are still on their way.list-searchThe region holding the field that narrows the list.list-search-fieldThe field itself.optionOne time in it. Carries `data-between` inside a range.option-descriptionThe caption under the words, when there is one.option-itemThe row.option-labelThe words.option-textThe words and the caption, as one column.
ExamplesNameDescriptionBusinessWorking hours only, at half-hour steps.Disable TimesNamed times taken out of an otherwise open range.DisabledDisabled, showing its time and refusing to move.EventsA time chosen from a list, which is a discrete step and announces like one.InvalidThe picker reporting a time it cannot accept.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 picker as wheels rather than as a list.