HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
ComboboxView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA field that filters a list as it is typed into.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/combobox'import'@fusion.dev/helix-headless/combobox'Preview
API ReferenceRoothelix-comboboxA field that filters a list as it is typed into.
PropTypeDefaultDescriptionautocompletestring"off"What the browser may autofill in the text field, as a platform token.creatablebooleanfalseWhether the reader may answer with something the list does not hold.createLabelstring"Add"What the create row says, before the words it would add.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.emptyTextstring"No matches"Words shown where the filter has hidden everything.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.listLabelstring"Options"Accessible name for the list, which has no visible one of its own.loadingbooleanfalseWhether the options are still on their way.loadingTextstring"Loading"What the list says while they are on their way.maxTagsnumber0How many tags to draw before the rest become a count. `multiple` only.multiplebooleanfalseWhether more than one option can be chosen.namestring""Name submitted with the form.openbooleanWhether the element is open.placeholderstring""Text shown while nothing has been chosen.removeLabelstring"Remove"What a tag's remove control is called, since the mark has no name.requiredbooleanfalseWhether the form refuses to submit without it.selectedIndexnumberWhich option is chosen, as an index, or `-1` where none is.suggestbooleanfalseWhether the field finishes the word as it is typed.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.typestringWhich kind of chooser this is, in the platform's two words.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The options, which are `helix-option` elements.endAfter it, for a unit or a clear button.indicatorReplaces the caret saying the field opens.startBefore the text, for an icon.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the chosen option 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 panel opens. Cancelable: refusing it takes the decision and nothing moves.helix-createHelixCreateEventFired when the reader asks for something the list does not hold, and cancelable.inputEventAnnounced once the value has moved.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionrequestOpen(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 field itself.createThe row offering to add what was typed.feedbackWhat is wrong with it.fieldThe box around the text and its marks.hintHelp under the field, while nothing is wrong.indicatorThe caret.labelThe question, over the field.listboxThe list inside it.listbox-emptyShown when a filter has hidden everything.listbox-feedbackWhat is wrong with it.listbox-filter-iconThe mark beside that field.listbox-filter-markThe glyph beside the filter field, where none is slotted.listbox-hintHelp under the list.listbox-itemsThe list itself.listbox-labelThe question, over the list.listbox-loadingShown while the options are still on their way.listbox-searchThe region holding the field that narrows the list.listbox-search-fieldThe field itself.restThe count of choices held beyond `max-tags`.surfaceThe floating panel.tagOne chosen option.tag-dismissThe remove button, when `dismissible`.tag-dismiss-markThe glyph on the dismiss control, where none is slotted.tag-prefixThe category before the label.tagsThe row of chosen options, when `multiple` is set.
CSS PropertyDescription--combobox-background-colorFill behind the field.--combobox-border-colorColor of the panel's edge.--combobox-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.--combobox-control-sizeSmallest the text field shrinks to--combobox-panel-sizeWidth of the panel. Follows the field by default.--combobox-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-comboboxA field that filters a list as it is typed into.
PropTypeDefaultDescriptionautocompletestring"off"What the browser may autofill in the text field, as a platform token.creatablebooleanfalseWhether the reader may answer with something the list does not hold.createLabelstring"Add"What the create row says, before the words it would add.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.emptyTextstring"No matches"Words shown where the filter has hidden everything.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.listLabelstring"Options"Accessible name for the list, which has no visible one of its own.loadingbooleanfalseWhether the options are still on their way.loadingTextstring"Loading"What the list says while they are on their way.maxTagsnumber0How many tags to draw before the rest become a count. `multiple` only.multiplebooleanfalseWhether more than one option can be chosen.namestring""Name submitted with the form.openbooleanWhether the element is open.placeholderstring""Text shown while nothing has been chosen.removeLabelstring"Remove"What a tag's remove control is called, since the mark has no name.requiredbooleanfalseWhether the form refuses to submit without it.selectedIndexnumberWhich option is chosen, as an index, or `-1` where none is.suggestbooleanfalseWhether the field finishes the word as it is typed.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.typestringWhich kind of chooser this is, in the platform's two words.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The options, which are `helix-option` elements.endAfter it, for a unit or a clear button.indicatorReplaces the caret saying the field opens.startBefore the text, for an icon.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the chosen option 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 panel opens. Cancelable: refusing it takes the decision and nothing moves.helix-createHelixCreateEventFired when the reader asks for something the list does not hold, and cancelable.inputEventAnnounced once the value has moved.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionrequestOpen(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 field itself.createThe row offering to add what was typed.feedbackWhat is wrong with it.fieldThe box around the text and its marks.hintHelp under the field, while nothing is wrong.indicatorThe caret.labelThe question, over the field.listboxThe list inside it.listbox-emptyShown when a filter has hidden everything.listbox-feedbackWhat is wrong with it.listbox-filter-iconThe mark beside that field.listbox-filter-markThe glyph beside the filter field, where none is slotted.listbox-hintHelp under the list.listbox-itemsThe list itself.listbox-labelThe question, over the list.listbox-loadingShown while the options are still on their way.listbox-searchThe region holding the field that narrows the list.listbox-search-fieldThe field itself.restThe count of choices held beyond `max-tags`.surfaceThe floating panel.tagOne chosen option.tag-dismissThe remove button, when `dismissible`.tag-dismiss-markThe glyph on the dismiss control, where none is slotted.tag-prefixThe category before the label.tagsThe row of chosen options, when `multiple` is set.
ExamplesNameDescriptionChosenOpening with a value already chosen, which is what an edit form does.CreatableTyping something that is not on the list and keeping it.DisabledDisabled with a value, so the value is still readable.EmptyA list with nothing in it says so, rather than opening onto a blank panel.EventsSeven announcements for one choice, and each of them is a different fact.InvalidA choice the field will not accept, and why.Max TagsA cap on the tags drawn, with the rest counted.MultipleSeveral choices at once, each shown as a tag.PreviewType to narrow a list, and choose from what is left.PreviewType to narrow a list, and choose from what is left.RequiredA choice that has to be made before the form will submit.SuggestThe rest of the match filled in ahead of the cursor as it is typed.