e8-form-checkbox
Updated on Sep 18, 2025 11 minutes to readA form input component for rendering a checkbox or switch, with full integration for labels, errors, and tooltips.
Overview
e8-form-checkbox represents a boolean input that allows users to select or deselect an option.
It can render as a standard checkbox or as a switch, and supports labels, tooltips, error messages, and different sizes.
The component allows binding to a value using v-model, and provides properties to control visibility, read-only state, and styling.
Insert this code into Main or Initialization script of the form to register a global method
E8App.$set(E8App.vars, 'acceptTerms', false);
E8App.$set(E8App.vars, 'newsletter', true);
E8App.$set(E8App.vars, 'notifications', false);
🔽 Show more
Copy this snippet into the Content section
<!-- Basic checkbox -->
<e8-form-checkbox
v-model="vars.acceptTerms"
label="Accept Terms and Conditions"
></e8-form-checkbox>
<p>Accepted: {{ vars.acceptTerms }}</p>
<!-- Switch style -->
<e8-form-checkbox
v-model="vars.newsletter"
input-type="switch"
label="Subscribe to newsletter"
></e8-form-checkbox>
<p>Subscribed: {{ vars.newsletter }}</p>
<!-- Checkbox with tooltip -->
<e8-form-checkbox
v-model="vars.notifications"
label="Enable notifications"
tooltip="Receive email notifications"
></e8-form-checkbox>
🔽 Show more
Accepted: {{ vars.acceptTerms }}
Subscribed: {{ vars.newsletter }}
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| input-type | Determines whether the control is a checkbox or a switch. | E8FormCheckboxInputTypes | 'checkbox' |
| label | Text displayed next to the checkbox; set to false to hide label. | string | boolean | — |
| readonly | Makes the control read-only. | boolean | false |
| size | Size of the control. | E8ElementSizes | 'default' |
| tooltip | Tooltip text displayed on hover. | string | — |
| v-model | Bound value of the checkbox (true or false). | boolean | — |
| visible | Controls whether the control is visible. | boolean | true |
Slots
| Slot | Description |
|---|---|
| label | Custom label slot. Provides { label, value } as slot props. |
Events
| Event | Description |
|---|---|
| on-change | Triggered when the value of the checkbox changes. |