Add another (experimental) example

Without ga4 tracking

Disables GA4 tracking on the add another component. Tracking is enabled by default. This adds a data module and data-attributes with JSONs to the add another component buttons. See the ga4-event-tracker documentation for more information.

How it looks (preview)

Item 1

Delete

Full name

Item 2

Full name

How to call this example

<%= render "govuk_publishing_components/components/add_another", {
  fieldset_legend: "Item",
  add_button_text: "Add another item",
  disable_ga4: true,
  items: [
    {
      fields: sanitize("<div class=\"govuk-form-group\">
      <label for=\"item_0_name\" class=\"gem-c-label govuk-label\">Full name</label>
      <input class=\"gem-c-input govuk-input\" id=\"item_0_name\" name=\"item[0]name\">
    </div>
    "),
      destroy_checkbox: sanitize("<div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">
      <div class=\"govuk-checkboxes__item\">
        <input type=\"checkbox\" name=\"item[0][_destroy]\" id=\"item_0__destroy\" class=\"govuk-checkboxes__input\">
        <label for=\"item_0__destroy\" class=\"govuk-label govuk-checkboxes__label\">Delete</label>
      </div>
    </div>
    ")
    }
  ],
  empty: sanitize("<div class=\"govuk-form-group\"> <label for=\"item_1_name\" class=\"gem-c-label govuk-label\">Full name</label> <input class=\"gem-c-input govuk-input\" id=\"item_1_name\" name=\"item[1]name\"> </div>")
} %>