Checkbox

Forms checkbox

A single labelled checkbox.

Markup

Drops in as data-pb-block="checkbox".

html

<label data-pb-block="checkbox" class="pb-checkbox" style="display:flex;align-items:center;gap:0.6rem;max-width:24rem;font-family:inherit;color:#0f172a;font-size:0.9375rem;cursor:pointer;">
  <input type="checkbox" name="agree" value="yes" class="pb-checkbox__control" style="width:1.1rem;height:1.1rem;outline-offset:2px;cursor:pointer;">
  <span class="pb-checkbox__label">I agree to the terms</span>
</label>

Settings

Everything a block can be configured to do:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="checkbox" so it imports as a labelled, editable component.
Field name: The control's name maps to a collection field key — the runtime collects it on submit of the surrounding Form.
Validation: Mark it required; the collection field's type and options (e.g. email, select choices) drive server-side validation.