HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
SelectView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA closed list that opens to be chosen from.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/select'import'@fusion.dev/helix-headless/select'Preview
API ReferenceRoothelix-selectA closed list that opens to be chosen from.
PropTypeDefaultDescriptiondefaultOpenbooleanfalseInitial 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.emphasis"ghost"How much ink the trigger claims.emptyTextstring"No matches"What it says where there are none.feedbackstring""What is wrong, in the reader's words rather than the browser's.filterablebooleanfalseWhether the list can be narrowed by typing.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.loadingbooleanfalseWhether the options are still on their way.loadingTextstring"Loading"What the list says while they are on their way.multiplebooleanfalseWhether more than one option can be the answer.namestring""Name submitted with the form.openbooleanWhether the element is open.placeholderstring"Choose"Shown on the trigger while nothing is chosen.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.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, and any groups of them.endAfter it, for a count, a unit, or a clear button.hintRicher than a string.indicatorThe mark on the trigger saying this opens, usually a caret.labelRicher than a string.startBefore the chosen value, for an icon or a prefix.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventRelayed from the listbox when the answer 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`.
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.
PartDescriptionfeedbackWhat is wrong with it.hintHelp under the trigger.indicatorThe caret saying the control opens. Replaced by slotting one.labelThe question, over the trigger.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.surfaceThe floating panel.triggerThe closed control, which says what is chosen.valueThe chosen option's text inside the trigger.
CSS PropertyDescription--select-border-colorColor of the panel's edge.--select-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.--select-shadowLift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default.--select-surface-max-block-sizeHow tall the panel gets.
Roothelix-headless-selectA closed list that opens to be chosen from.
PropTypeDefaultDescriptiondefaultOpenbooleanfalseInitial 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"What it says where there are none.feedbackstring""What is wrong, in the reader's words rather than the browser's.filterablebooleanfalseWhether the list can be narrowed by typing.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.loadingbooleanfalseWhether the options are still on their way.loadingTextstring"Loading"What the list says while they are on their way.multiplebooleanfalseWhether more than one option can be the answer.namestring""Name submitted with the form.openbooleanWhether the element is open.placeholderstring"Choose"Shown on the trigger while nothing is chosen.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.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, and any groups of them.endAfter it, for a count, a unit, or a clear button.hintRicher than a string.indicatorThe mark on the trigger saying this opens, usually a caret.labelRicher than a string.startBefore the chosen value, for an icon or a prefix.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventRelayed from the listbox when the answer 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`.
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.
PartDescriptionfeedbackWhat is wrong with it.hintHelp under the trigger.indicatorThe caret saying the control opens. Replaced by slotting one.labelThe question, over the trigger.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.surfaceThe floating panel.triggerThe closed control, which says what is chosen.valueThe chosen option's text inside the trigger.
ExamplesNameDescriptionDisabledDisabled, and one option disabled inside a live select.EventsA panel opening and a value moving, which are two things and say so.FilterableA search box in the list, for a set too long to scan.InlineInline: no frame, the width of its answer, for a control in a row of tools rather than on a form.InvalidA select reporting that nothing was chosen.MultipleSeveral options chosen from one list.PreviewA native select with a label and a hint.PreviewA native select with a label and a hint.RequiredA select that wants an answer before the form will submit.