Add another (experimental) example

Sortable

Adding sortable to the component will allow users to rearrange the items in the list.

This component uses SortableJS. When JavaScript is disabled a set of inputs will be shown allowing users to provide an order index for each item.

For this to work, each field must have an order_index input provided.

How it looks (preview)

Person 1

Position

Delete

Full name

Person 2

Position

Delete

Full name

Person 3

Full name

How to call this example

<%= render "govuk_publishing_components/components/add_another", {
  fieldset_legend: "Person",
  add_button_text: "Add another person",
  sortable: true,
  items: [
    {
      fields: sanitize("<div class=\"govuk-form-group\">
      <label for=\"sortable_person_0_name\" class=\"gem-c-label govuk-label\">Full name</label>
      <input class=\"gem-c-input govuk-input\" id=\"sortable_person_0_name\" name=\"person[0]name\" value=\"Person A\">
    </div>
    "),
      destroy_checkbox: sanitize("<div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">
      <div class=\"govuk-checkboxes__item\">
        <input type=\"checkbox\" name=\"person[0][_destroy]\" id=\"sortable_person_0__destroy\" class=\"govuk-checkboxes__input\">
        <label for=\"sortable_person_0__destroy\" class=\"govuk-label govuk-checkboxes__label\">Delete</label>
      </div>
    </div>
    "),
      order_input: sanitize("<input class=\"gem-c-input govuk-input govuk-input--width-2\" id=\"sortable_person_0_order\" name=\"person[0]order\" value=\"1\">
    ")
    },
    {
      fields: sanitize("<div class=\"govuk-form-group\">
      <label for=\"sortable_person_1_name\" class=\"gem-c-label govuk-label\">Full name</label>
      <input class=\"gem-c-input govuk-input\" id=\"sortable_person_1_name\" name=\"person[1]name\" value=\"Person B\">
    </div>
    "),
      destroy_checkbox: sanitize("<div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">
      <div class=\"govuk-checkboxes__item\">
        <input type=\"checkbox\" name=\"person[1][_destroy]\" id=\"sortable_person_1__destroy\" class=\"govuk-checkboxes__input\">
        <label for=\"sortable_person_1__destroy\" class=\"govuk-label govuk-checkboxes__label\">Delete</label>
      </div>
    </div>
    "),
      order_input: sanitize("<input class=\"gem-c-input govuk-input govuk-input--width-2\" id=\"sortable_person_1_order\" name=\"person[1]order\" value=\"2\">
    ")
    }
  ],
  empty: sanitize("<div class=\"govuk-form-group\"> <label for=\"sortable_person_2_name\" class=\"gem-c-label govuk-label\">Full name</label> <input class=\"gem-c-input govuk-input\" id=\"sortable_person_2_name\" name=\"person[2]name\"> </div>")
} %>