Checkbox Input — Reference

Look up the controls for Checkbox Input and understand the markup, values and visual behavior they configure.

Checkbox Input

Bootstrap 5 component. Add the component and configure its properties in the Inspector.

Checkbox Properties

Name	Description
ID	Sets this element’s unique page identifier. Use a stable name such as projectSummary when another control, label or anchor must target it. Do not duplicate a static ID inside repeated markup; a component binding name and a form field’s submitted Name serve different purposes.
Class	Edits the element’s space-separated CSS class list. For example, add a project-defined class such as project-summary only when your stylesheet defines it. Preserve classes required by the component. A class name alone does not create CSS, load an extension or implement an event handler.
Name	Checkbox name attribute. Sets the checkbox name . This name is used as the submitted field key for classic form submissions and many handlers. Bootstrap docs: Checks & radios Default: "". Attribute: name.
Static Value	Checkbox submit value. Sets the value submitted when the checkbox is checked. For boolean logic in App Connect, you often bind to checked state rather than a raw submit value. Bootstrap docs: Checks & radios Default: "". Attribute: value.
Disabled	Disables the checkbox. Disables the checkbox input. Disabled checkboxes cannot be toggled. Bootstrap docs: Disabled Default: false. Attribute: disabled.
Read Only	Read-only checkbox (UI only). Makes the checkbox effectively read-only in the UI. Note: HTML doesn't support true readonly on checkboxes; use App Connect logic to prevent changes if needed. Bootstrap docs: Checks & radios Default: false. Attribute: readonly.
Position Static	Removes default checkbox positioning. Uses a static positioning style for the checkbox input. This can be useful when you need custom alignment/layout around the checkbox. Bootstrap docs: Checks & radios Default: false.

Spacing

Name	Description
Margin and Padding	Sets outer margin and inner padding utilities for the selected viewport breakpoint. For example, at MD, bottom margin 3 becomes mb-md-3; without a breakpoint, p-3 adds padding on every side. Start/End follow writing direction. The spacing scale comes from the project theme. Negative margin classes require a stylesheet built with negative-margin utilities enabled; the bundled default disables them. Options: mt-0, mt-1, mt-2, mt-3, mt-4, mt-5, mt-n1, mt-n2, mt-n3, mt-n4, mt-n5, mt-auto, mb-0, mb-1, mb-2, mb-3, mb-4, mb-5, mb-n1, mb-n2, mb-n3, mb-n4, mb-n5, mb-auto, ms-0, ms-1, ms-2, ms-3, ms-4, ms-5, ms-n1, ms-n2, ms-n3, ms-n4, ms-n5, ms-auto, me-0, me-1, me-2, me-3, me-4, me-5, me-n1, me-n2, me-n3, me-n4, me-n5, me-auto, mx-0, mx-1, mx-2, mx-3, mx-4, mx-5, mx-n1, mx-n2, mx-n3, mx-n4, mx-n5, mx-auto, my-0, my-1, my-2, my-3, my-4, my-5, my-n1, my-n2, my-n3, my-n4, my-n5, my-auto, m-0, m-1, m-2, m-3, m-4, m-5, m-n1, m-n2, m-n3, m-n4, m-n5, m-auto, pt-0, pt-1, pt-2, pt-3, pt-4, pt-5, pb-0, pb-1, pb-2, pb-3, pb-4, pb-5, ps-0, ps-1, ps-2, ps-3, ps-4, ps-5, pe-0, pe-1, pe-2, pe-3, pe-4, pe-5, px-0, px-1, px-2, px-3, px-4, px-5, py-0, py-1, py-2, py-3, py-4, py-5, p-0, p-1, p-2, p-3, p-4, p-5.
X Gutter	Sets the horizontal Bootstrap row gutter through a gx-* utility. For example, gx-3 changes the spacing between columns when applied to a Bootstrap row. It works through the row and column gutter rules; adding it to an unrelated element does not create a column layout. Options: 0 (gx-0), 1 (gx-1), 2 (gx-2), 3 (gx-3), 4 (gx-4), 5 (gx-5). Default: no override from this control.
Y Gutter	Sets the vertical Bootstrap row gutter through a gy-* utility. For example, gy-3 adds space between wrapped rows of columns. It does not replace padding inside a card or change the spacing of a non-grid element by itself. Options: 0 (gy-0), 1 (gy-1), 2 (gy-2), 3 (gy-3), 4 (gy-4), 5 (gy-5). Default: no override from this control.

Display

Name	Description
Hide on	Hides the element at selected viewport ranges by adding responsive display utilities. For example, hiding below MD produces d-none with a restoring display class at MD. The control uses the component’s normal display type when restoring it. This hides layout and content visually; it does not protect private data or stop a server endpoint being called. Options: Hide on mobile (xs), Hide on landscape mobile (sm), Hide on tablet (md), Hide on laptop (lg), Hide on desktop (xl), Hide on extra wide (xxl).
Print	Controls whether this element appears in printed output. Hide writes d-print-none. Show restores the component’s display type for print, such as d-print-block or d-print-table-row. For example, hide a navigation bar when printing a report. Check browser print preview because screen layout alone does not show this setting. Options: Show (d-print-block), Hide (d-print-none).
Visually Hidden	Adds visually-hidden: content remains available to assistive technologies while it is visually clipped. Use it for an accessible label that should not appear on screen, not for hiding private data. It is different from display:none, which also removes the element from layout and generally from the accessibility tree. Default: off.
Focusable	Adds visually-hidden-focusable, which hides the element until it or a descendant receives focus. A skip link is a typical example. The element must already be focusable, such as an anchor with href; this class does not add keyboard focusability. Do not combine it with an unconditional visually-hidden class, which would keep it hidden even when focused. Default: off.

Check your result

You can select a setting, apply its documented value and check the relevant effect on the page.