Checkbox Input Reference
Reference for Checkbox Input Reference in Web Framework References. Key properties: ID, Class, Name, Static Value.
Bootstrap 5 component. Add the component and configure its properties in the Inspector.
Inspector Property Groups
Checkbox Properties
| Property | Type | Details |
|---|---|---|
| ID | text | Optional unique identifier for this element. Sets the element's id attribute. Keep IDs unique per page (useful for anchors, label for targets, and JavaScript hooks). Bootstrap docs: Introduction Attribute: id |
| Class | text | Adds raw class names to the element. Adds text directly to the class attribute. Use this for custom utility classes or project-specific overrides. Separate multiple classes with spaces. Bootstrap docs: Utilities API Attribute: class |
| Name | text | 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 Attribute: name |
| Static Value | text | 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 Attribute: value |
| Disabled | boolean | Disables the checkbox. Disables the checkbox input. Disabled checkboxes cannot be toggled. Bootstrap docs: Disabled Attribute: disabled |
| Read Only | boolean | 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 Attribute: readonly |
Spacing
| Property | Type | Details |
|---|---|---|
| Margin<br>&<br>Padding | spacing | |
| X Gutter | range | Horizontal gutter size. Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters |
| Y Gutter | range | Vertical gutter size. Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters |
Display
| Property | Type | Details |
|---|---|---|
| Hide on | button_group | Options: xs, sm, md, lg, xl, xxl |
| button_group | ||
| Visually Hidden | boolean | |
| Focusable | boolean |