Radio group

Forms radio_group

A set of radio buttons sharing one name.

Markup

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

html

<fieldset data-pb-block="radio_group" class="pb-radio-group" style="border:0;padding:0;margin:0;max-width:24rem;font-family:inherit;">
  <legend class="pb-radio-group__legend" style="padding:0;margin:0 0 0.5rem;font-weight:600;color:#0f172a;font-size:0.9375rem;">Pick one</legend>
  <label class="pb-radio-group__option" style="display:flex;align-items:center;gap:0.6rem;margin:0 0 0.4rem;color:#0f172a;font-size:0.9375rem;cursor:pointer;">
    <input type="radio" name="choice" value="a" class="pb-radio-group__control" style="width:1.05rem;height:1.05rem;outline-offset:2px;cursor:pointer;" checked>
    <span>Option A</span>
  </label>
  <label class="pb-radio-group__option" style="display:flex;align-items:center;gap:0.6rem;margin:0 0 0.4rem;color:#0f172a;font-size:0.9375rem;cursor:pointer;">
    <input type="radio" name="choice" value="b" class="pb-radio-group__control" style="width:1.05rem;height:1.05rem;outline-offset:2px;cursor:pointer;">
    <span>Option B</span>
  </label>
  <label class="pb-radio-group__option" style="display:flex;align-items:center;gap:0.6rem;margin:0;color:#0f172a;font-size:0.9375rem;cursor:pointer;">
    <input type="radio" name="choice" value="c" class="pb-radio-group__control" style="width:1.05rem;height:1.05rem;outline-offset:2px;cursor:pointer;">
    <span>Option C</span>
  </label>
</fieldset>

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="radio_group" 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.