HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
CheckboxView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA box that is ticked, or not, or neither.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/checkbox'import'@fusion.dev/helix-headless/checkbox'Preview
API ReferenceRoothelix-checkboxA box that is ticked, or not, or neither.
PropTypeDefaultDescriptioncheckedbooleanWhether the control is checked.defaultCheckedbooleanfalseInitial checked state for uncontrolled use, where nothing declared one.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.indeterminatebooleanfalseWhether the box shows as neither checked nor unchecked.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"on"Value submitted when the box is checked.variant"plain"|"card"How the choice presents itself.
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 label.
EventTypeDescriptionchangeEventRelayed from the input once the state has changed.helix-before-toggleHelixBeforeToggleEventFired before the state changes, and cancelable.inputEventAnnounced once the state has moved.
MethodTypeDescriptionrequestChecked(next: boolean) => booleanRequests a checked change, and reports whether it was applied.resetChecked() => voidDrops the recorded state, so the control reads `defaultChecked` again.toggleChecked() => booleanRequests the opposite of the current state.
PartDescriptionboxThe frame the input is painted as, and the mark sits over.controlThe input.feedbackWhat is wrong with it.fieldThe row the box and its label share, and the surface the card appearance draws.hintHelp under the control, while nothing is wrong.labelThe label beside it.markThe tick, or the dash when the box is indeterminate.
CSS PropertyDescription--checkbox-background-colorFill of an unticked box.--checkbox-border-colorEdge of the box, in every state.--checkbox-card-background-colorFill behind a card-shaped choice.--checkbox-card-border-colorEdge around one.--checkbox-card-paddingInset of the card appearance.--checkbox-checked-colorFill of a ticked box.--checkbox-mark-colorInk the tick is drawn in.--checkbox-sizeWidth and height of the box.
Roothelix-headless-checkboxA box that is ticked, or not, or neither.
PropTypeDefaultDescriptioncheckedbooleanWhether the control is checked.defaultCheckedbooleanfalseInitial checked state for uncontrolled use, where nothing declared one.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.indeterminatebooleanfalseWhether the box shows as neither checked nor unchecked.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"on"Value submitted when the box is checked.
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 label.
EventTypeDescriptionchangeEventRelayed from the input once the state has changed.helix-before-toggleHelixBeforeToggleEventFired before the state changes, and cancelable.inputEventAnnounced once the state has moved.
MethodTypeDescriptionrequestChecked(next: boolean) => booleanRequests a checked change, and reports whether it was applied.resetChecked() => voidDrops the recorded state, so the control reads `defaultChecked` again.toggleChecked() => booleanRequests the opposite of the current state.
PartDescriptionboxThe frame the input is painted as, and the mark sits over.controlThe input.feedbackWhat is wrong with it.fieldThe row the box and its label share, and the surface the card appearance draws.hintHelp under the control, while nothing is wrong.labelThe label beside it.markThe tick, or the dash when the box is indeterminate.
ExamplesNameDescriptionCardsCheckboxes drawn as cards, for options that need room to explain themselves.ControlledA box the page owns, answering the event and assigning `checked`.DisabledDisabled checked and unchecked, since the two look different.EventsA boolean carried as a boolean, and the native pair a click sends.IndeterminateThe third state, for a parent whose children disagree.InvalidA checkbox reporting why it is not acceptable.PreviewOne checkbox with a label and a hint under it.PreviewOne checkbox with a label and a hint under it.RequiredRequired marked on the label, and what the browser says when it is skipped.