HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
ToggleView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorOne option in a toggle group.ExperimentalSince 0.1.0ActionsUsageimport'@fusion.dev/helix/toggle'import'@fusion.dev/helix-headless/toggle'Preview
API ReferenceRoothelix-toggleOne option in a toggle group.
PropTypeDefaultDescriptiondefaultSelectedbooleanWhether the markup declared this one chosen, which is what a reset returns to.disabledbooleanfalseWhether the item can be chosen.focusablebooleanfalseWhether this item holds the group's tab stop while nothing is chosen.selectedbooleanfalseWhether this item is the current one.valuestring""Identifies the item to the group.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The item's label.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the item is chosen. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionfocusItem() => voidMoves focus to this item's own control.select() => voidChooses this item and announces it.
PartDescriptionitemThe button or anchor.
Grouphelix-toggle-groupA row of options with the selection marked by a moving indicator.
PropTypeDefaultDescriptiondefaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.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.labelPlacement"start"Where the group's label sits, `start` putting it on the track's line.namestring""Name submitted with the form.requiredbooleanfalseWhether the form refuses to submit without it.separation"outlined"|"plain"How the group separates itself from the page.valuestringWhat the control holds now, and what its form submits.
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.
SlotDescription(default)The group's items.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the answer moves, and cancelable. The only way to refuse one.helix-selectHelixSelectEventFired when an item is chosen. Dispatched by the item and listened for here. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.
MethodTypeDescriptionrequestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptiondividerThe rule after an inline label, separating it from the items.feedbackWhat is wrong with it.hintHelp under the row, while nothing is wrong.indicatorThe moving marker behind the selected item.labelThe question, over the row.rowThe line the track sits on, with whatever flanks it.trackThe bar the items sit in.
CSS PropertyDescription--toggle-group-indicator-colorFill of the moving marker.
Roothelix-headless-toggleOne option in a toggle group.
PropTypeDefaultDescriptiondefaultSelectedbooleanWhether the markup declared this one chosen, which is what a reset returns to.disabledbooleanfalseWhether the item can be chosen.focusablebooleanfalseWhether this item holds the group's tab stop while nothing is chosen.selectedbooleanfalseWhether this item is the current one.valuestring""Identifies the item to the group.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The item's label.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the item is chosen. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionfocusItem() => voidMoves focus to this item's own control.select() => voidChooses this item and announces it.
PartDescriptionitemThe radio button.
Grouphelix-headless-toggle-groupA row of options with the selection marked by a moving indicator.
PropTypeDefaultDescriptiondefaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.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.labelPlacement"start"Where the group's label sits, `start` putting it on the track's line.namestring""Name submitted with the form.requiredbooleanfalseWhether the form refuses to submit without it.valuestringWhat the control holds now, and what its form submits.
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.
SlotDescription(default)The group's items.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the answer moves, and cancelable. The only way to refuse one.helix-selectHelixSelectEventFired when an item is chosen. Dispatched by the item and listened for here. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.
MethodTypeDescriptionrequestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptiondividerThe rule after an inline label, separating it from the items.feedbackWhat is wrong with it.hintHelp under the row, while nothing is wrong.indicatorThe moving marker behind the selected item.labelThe question, over the row.rowThe line the track sits on, with whatever flanks it.trackThe bar the items sit in.
ExamplesNameDescriptionDisabledA whole group disabled, and one member disabled inside a live group.EventsButtons where one stays pressed, which is a value and announces like one.FilledThe pressed member filled rather than outlined.InvalidThe group reporting that nothing was chosen.Label FirstThe word before the control, for a row read as a sentence.PlainNo track and no edges, for a group inside something that has both.PreviewButtons where one stays pressed, which is a choice rather than an action.PreviewButtons where one stays pressed, which is a choice rather than an action.StatesOne that toggles, and one where exactly one stays pressed.