HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Checkbox GroupView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorGroups related checkboxes, and reports them as one set.StableSince 0.1.0FormsUsageimport'@fusion.dev/helix/checkbox-group'import'@fusion.dev/helix-headless/checkbox-group'Preview
API ReferenceRoothelix-checkbox-groupGroups related checkboxes, and reports them as one set.
PropTypeDefaultDescriptiondisabledbooleanfalseWhether 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.namestring""Name submitted with the form.orientation"horizontal"Which way the boxes run.requiredbooleanfalseWhether the form refuses to submit without it.valuestring""The checked values, comma separated.
ReadTypeDescriptionboxesHelixHeadlessCheckbox[]The boxes, in light-DOM order. Client only: the server has no tree.formHTMLFormElement|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 checkboxes.hintRicher than a string.labelRicher than a string, where the label is more than one.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before any box changes, with the whole set. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.
PartDescriptionfeedbackWhat is wrong with it.hintHelp under the set.itemsThe list itself, which is what `orientation` lays out.labelThe group's name, over the set.
CSS PropertyDescription--checkbox-group-gapSpace between the boxes.
Roothelix-headless-checkbox-groupGroups related checkboxes, and reports them as one set.
PropTypeDefaultDescriptiondisabledbooleanfalseWhether 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.namestring""Name submitted with the form.requiredbooleanfalseWhether the form refuses to submit without it.valuestring""The checked values, comma separated.
ReadTypeDescriptionboxesHelixHeadlessCheckbox[]The boxes, in light-DOM order. Client only: the server has no tree.formHTMLFormElement|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 checkboxes.hintRicher than a string.labelRicher than a string, where the label is more than one.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before any box changes, with the whole set. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.
PartDescriptionfeedbackWhat is wrong with it.hintHelp under the set.itemsThe list itself, which is what `orientation` lays out.labelThe group's name, over the set.
ExamplesNameDescriptionDisabledA whole group disabled, and one member disabled inside a live group.EventsThe group answers for the set, and one box answering for itself is not the same fact.HorizontalThe members in a row rather than a column.InvalidThe group reporting a fault that belongs to the set rather than to a member.PreviewSeveral checkboxes under one label, each submitting itself.PreviewSeveral checkboxes under one label, each submitting itself.RequiredA group that wants at least one answer.