Reorderable list example

Within form

How it looks (preview)

Budget 2018

Position for Budget 2018
Budget 2018 (web)

Position for Budget 2018 (web)
Impact on households: distributional analysis to accompany Budget 2018

Position for Impact on households: distributional analysis to accompany Budget 2018
Table 2.1: Budget 2018 policy decisions

Position for Table 2.1: Budget 2018 policy decisions
Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)

Position for Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)

How to call this example

<form>
  <%= render "govuk_publishing_components/components/reorderable_list", {
  items: [
    {
      id: "ce99dd60-67dc-11eb-ae93-0242ac130002",
      title: "Budget 2018"
    },
    {
      id: "d321cb86-67dc-11eb-ae93-0242ac130002",
      title: "Budget 2018 (web)"
    },
    {
      id: "63a6d29e-6b6d-4157-9067-84c1a390e352",
      title: "Impact on households: distributional analysis to accompany Budget 2018"
    },
    {
      id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85",
      title: "Table 2.1: Budget 2018 policy decisions"
    },
    {
      id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9",
      title: "Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)"
    }
  ]
} %>
  <button class="govuk-button" type="submit">Save order</button>
</form>