HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
ListboxView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA list of options, one or several of which are the answer.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/listbox'import'@fusion.dev/helix-headless/listbox'Preview
API ReferenceRoothelix-listboxA list of options, one or several of which are the answer.
PropTypeDefaultDescriptionautocompletestring"off"What the browser may autofill in the text field, as a platform token.defaultFilterstring""What to start narrowed to, where nothing declared it.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.emptyTextstring"Nothing to show"What is said where there are none, and none are coming.feedbackstring""What is wrong, in the reader's words rather than the browser's.filterstringWhat the list is narrowed to, if anything.filterablebooleanfalseWhether the list renders a field for narrowing itself.filterLabelstring"Filter"Placeholder for the field that narrows the list.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.multiplebooleanfalseWhether more than one option can be the answer.namestring""Name submitted with the form.requiredbooleanfalseWhether the form refuses to submit without it.selectedIndexnumberWhich option is chosen, as an index, or `-1` where none is.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.optionsHelixHeadlessOption[]Every option, in the order a reader meets them.typestringWhich kind of chooser this is, in the platform's two words.valuesstring[]The chosen values, which is a list whether or not `multiple` is set.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The options, and any groups of them.hintRicher than a string.labelRicher than a string.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired when the answer changes, and cancelable.helix-filterHelixFilterEventFired before the list narrows, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionnavigate(event: KeyboardEvent) => voidRuns the list's own key handling for a caller whose focus is elsewhere.requestFilter(next: string) => booleanRequests a narrowing, and reports whether the request stood.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.reveal() => voidBrings the chosen option to rest in the middle of the list.
PartDescriptionemptyShown when a filter has hidden everything.feedbackWhat is wrong with it.filter-iconThe mark beside that field.filter-markThe glyph beside the filter field, where none is slotted.hintHelp under the list.itemsThe list itself.labelThe question, over the list.loadingShown while the options are still on their way.searchThe region holding the field that narrows the list.search-fieldThe field itself.
CSS PropertyDescription--listbox-max-block-sizeHow tall it gets before it scrolls.
Roothelix-headless-listboxA list of options, one or several of which are the answer.
PropTypeDefaultDescriptionautocompletestring"off"What the browser may autofill in the text field, as a platform token.defaultFilterstring""What to start narrowed to, where nothing declared it.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.emptyTextstring"No matches"What is shown when a filter has hidden every option.feedbackstring""What is wrong, in the reader's words rather than the browser's.filterstringWhat the list is narrowed to, if anything.filterablebooleanfalseWhether the list renders a field for narrowing itself.filterLabelstring"Filter"Placeholder for the field that narrows the list.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.multiplebooleanfalseWhether more than one option can be the answer.namestring""Name submitted with the form.requiredbooleanfalseWhether the form refuses to submit without it.selectedIndexnumberWhich option is chosen, as an index, or `-1` where none is.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.optionsHelixHeadlessOption[]Every option, in the order a reader meets them.typestringWhich kind of chooser this is, in the platform's two words.valuesstring[]The chosen values, which is a list whether or not `multiple` is set.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The options, and any groups of them.hintRicher than a string.labelRicher than a string.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired when the answer changes, and cancelable.helix-filterHelixFilterEventFired before the list narrows, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionnavigate(event: KeyboardEvent) => voidRuns the list's own key handling for a caller whose focus is elsewhere.requestFilter(next: string) => booleanRequests a narrowing, and reports whether the request stood.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.reveal() => voidBrings the chosen option to rest in the middle of the list.
PartDescriptionemptyShown when a filter has hidden everything.feedbackWhat is wrong with it.filter-iconThe mark beside that field.filter-markThe glyph beside the filter field, where none is slotted.hintHelp under the list.itemsThe list itself.labelThe question, over the list.loadingShown while the options are still on their way.searchThe region holding the field that narrows the list.search-fieldThe field itself.
ExamplesNameDescriptionControlled FilterThe filter text owned by the page, for a list narrowed from a box outside it.DisabledA whole list disabled, and one option disabled inside a live list.EventsA list that filters and a list that chooses, which are not the same event.FilteredA field over the list that narrows it as it is typed.InvalidThe list reporting that no choice was made.MultipleSeveral options chosen at once.PreviewA list to choose one from, always open.PreviewA list to choose one from, always open.RequiredA list that wants an answer before the form will submit.