HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
OptionView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorOne choice in a listbox.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/option'import'@fusion.dev/helix-headless/option'Preview
API ReferenceRoothelix-optionOne choice in a listbox.
PropTypeDefaultDescriptionactivebooleanfalseWhether this is the option the keyboard is on.alternatestring""A second destination for this row, taken with the modifier held.alternateLabelstring""What the second destination is, for a reader who cannot see the footer.defaultSelectedbooleanWhether the markup declared this one chosen, which is what a reset returns to.descriptionstringA second line under the words, for what the choice actually is.disabledbooleanfalseWhether this choice can be made.labelstring""A shorter name for this choice, for where the row does not fit.selectedbooleanfalseWhether this choice is currently chosen.valuestring""Identifies this choice, and is what a form submits.
ReadTypeDescriptiontextstringThe words, for a listbox that has to match text against them.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The words naming this choice.endAfter them, for a shortcut or a count.startBefore the words, for an icon or an avatar.
EventTypeDescriptionhelix-selectHelixSelectEventFired when this choice is made. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionselect() => voidMakes this choice and announces it.
PartDescriptiondescriptionThe caption under the words, when there is one.itemThe row.labelThe words.textThe words and the caption under them, as one column.
CSS PropertyDescription--option-active-colorWash behind the option the keyboard is on.--option-block-paddingSpace above and below it. `Command` raises this, a palette being a page of rows read at speed rather than a select's short list.--option-paddingSpace before the label, shared with a group heading.--option-radiusCorner radius of the row. A listbox and a select flatten it.
Grouphelix-option-groupA named run of options inside a listbox.
PropTypeDefaultDescriptionlabelstring""The heading over the run.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The options in this run.labelRicher than a string.
PartDescriptionitemsThe run itself.labelThe heading.
Roothelix-headless-optionOne choice in a listbox.
PropTypeDefaultDescriptionactivebooleanfalseWhether this is the option the keyboard is on.alternatestring""A second destination for this row, taken with the modifier held.alternateLabelstring""What the second destination is, for a reader who cannot see the footer.defaultSelectedbooleanWhether the markup declared this one chosen, which is what a reset returns to.descriptionstringA second line under the words, for what the choice actually is.disabledbooleanfalseWhether this choice can be made.labelstring""A shorter name for this choice, for where the row does not fit.selectedbooleanfalseWhether this choice is currently chosen.valuestring""Identifies this choice, and is what a form submits.
ReadTypeDescriptiontextstringThe words, for a listbox that has to match text against them.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The words naming this choice.endAfter them, for a shortcut or a count.startBefore the words, for an icon or an avatar.
EventTypeDescriptionhelix-selectHelixSelectEventFired when this choice is made. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionselect() => voidMakes this choice and announces it.
PartDescriptiondescriptionThe caption under the words, when there is one.itemThe row.labelThe words.textThe words and the caption under them, as one column.
Grouphelix-headless-option-groupA named run of options inside a listbox.
PropTypeDefaultDescriptionlabelstring""The heading over the run.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The options in this run.labelRicher than a string.
PartDescriptionitemsThe run itself.labelThe heading.
ExamplesNameDescriptionEventsAn option says it was chosen, and the list it is in is what hears it.GroupedOptions under headings, for a list long enough to need them.PreviewOne option, chosen, as a listbox or select holds it.PreviewOne option, chosen, as a listbox or select holds it.