HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Checkbox GroupView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA group of related checkboxes under one label, with one value for the set.StableSince 0.1.0FormsUsageimport'@fusion.dev/helix/checkbox-group'import'@fusion.dev/helix-headless/checkbox-group'Preview
API ReferenceRoothelix-checkbox-groupA group of related checkboxes under one label, with one value for the set.
PropTypeDescriptiondisabledbooleanDefaultfalseWhether the control is disabled and cannot be used.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.hintstringDefault""Help text shown under the control. A validation message replaces it.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.namestringDefault""The name the control's value is submitted under.orientation"horizontal"The direction the checkboxes run. Set horizontal for a row. Unset is a
column.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.selectAllbooleanDefaultfalseWhether a box above the set checks or unchecks every enabled box.selectAllLabelstringDefault"Select all"The words beside the box select-all draws.valuestringThe checked values, comma separated.valueMissingMessagestringDefault"Choose at least one to continue."The message shown when the field is required and empty.valuesstring[]The checked values, as a list, in the order the boxes are written.
ReadTypeDescriptionboxesHelixHeadlessCheckbox[]The checkboxes in the group, in the order they are written. Browser only.formHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescription(default)The checkboxes, and anything laid out around them.feedbackThe message that says what is wrong, for content richer than a string. It shows while there is a message.hintHelp under the checkboxes, for help that needs more than plain text.labelThe group's label, for a label that needs more than plain text.
EventTypeDescriptionchangeEventThe set of checked boxes changed.helix-before-changeHelixBeforeChangeEventA box is about to change. Carries the whole set that would result. Cancelable: canceling it leaves every box as it was.inputEventThe set of checked boxes changed.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidMoves focus to the control, as focusing a native control does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.
PartDescriptionfeedbackThe message that says what is wrong with the set.hintThe help under the checkboxes.itemsThe element that holds the checkboxes, laid out by orientation.labelThe group's label, above the checkboxes.select-allThe box that checks or unchecks every box, under select-all.select-all-boxThe select-all box's box, under the mark.select-all-controlThe select-all box's native input.select-all-feedbackThe select-all box's own message, which it never shows.select-all-fieldThe row that holds the select-all box and its label.select-all-hintThe select-all box's own help, which it never shows.select-all-labelThe words beside the select-all box.select-all-markThe select-all box's check mark, or its dash while only some boxes are checked.select-all-mark-checkedAdded to select-all-mark while every box is checked.select-all-mark-dashAdded to select-all-mark while only some boxes are checked, and kept until every one is.select-all-mark-indeterminateAdded to select-all-mark while only some boxes are checked.
CSS PropertyDescription--checkbox-group-gapThe space between the checkboxes.
Custom stateDescriptioninvalidThe control has an error to show, from the browser's validation or from your feedback.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-checkbox-groupA group of related checkboxes under one label, with one value for the set.
PropTypeDescriptiondisabledbooleanDefaultfalseWhether the control is disabled and cannot be used.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.hintstringDefault""Help text shown under the control. A validation message replaces it.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.namestringDefault""The name the control's value is submitted under.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.selectAllbooleanDefaultfalseWhether a box above the set checks or unchecks every enabled box.selectAllLabelstringDefault"Select all"The words beside the box select-all draws.valuestringThe checked values, comma separated.valueMissingMessagestringDefault"Choose at least one to continue."The message reported when the field is required and no box is ticked.
Absent, or empty, is this sentence, or the words registered for the page's
locale.valuesstring[]The checked values, as a list, in the order the boxes are written.
ReadTypeDescriptionboxesHelixHeadlessCheckbox[]The checkboxes in the group, in the order they are written. Browser only.formHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescription(default)The checkboxes, and anything laid out around them.feedbackThe message that says what is wrong, for content richer than a string. It shows while there is a message.hintHelp under the checkboxes, for help that needs more than plain text.labelThe group's label, for a label that needs more than plain text.
EventTypeDescriptionchangeEventThe set of checked boxes changed.helix-before-changeHelixBeforeChangeEventA box is about to change. Carries the whole set that would result. Cancelable: canceling it leaves every box as it was.inputEventThe set of checked boxes changed.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidMoves focus to the control, as focusing a native control does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.
PartDescriptionfeedbackThe message that says what is wrong with the set.hintThe help under the checkboxes.itemsThe element that holds the checkboxes, laid out by orientation.labelThe group's label, above the checkboxes.select-allThe box that checks or unchecks every box, under select-all.select-all-boxThe select-all box's box, under the mark.select-all-controlThe select-all box's native input.select-all-feedbackThe select-all box's own message, which it never shows.select-all-fieldThe row that holds the select-all box and its label.select-all-hintThe select-all box's own help, which it never shows.select-all-labelThe words beside the select-all box.select-all-markThe select-all box's check mark, or its dash while only some boxes are checked.select-all-mark-checkedAdded to select-all-mark while every box is checked.select-all-mark-dashAdded to select-all-mark while only some boxes are checked, and kept until every one is.select-all-mark-indeterminateAdded to select-all-mark while only some boxes are checked.
Custom stateDescriptioninvalidThe control has an error to show, from the browser's validation or from your feedback.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionDisabledA group disabled with disabled, and a group disabled by the fieldset around it.EventsThe events the group sends for the whole set when you check or uncheck a box.HorizontalA group with its checkboxes in a row.InvalidA group showing a message about the whole set, set with feedback.PreviewSeveral checkboxes under one label. Each checkbox submits its own value.PreviewSeveral checkboxes under one label. Each checkbox submits its own value.RequiredA required group, where at least one box must be checked before the form submits.