Component

Reorderable list

A list of items that can be reordered

List items can be reordered by drag and drop or by using the up/down buttons. On small viewports the drag and drop feature is disabled to prevent being triggered when scrolling on touch devices.

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

When this component is embedded into a form and that form is submit you will receive a parameter of ordering (which can be customised with the input_name option). This will contain item ids and ordering positions in a hash.

For example, for two items with id “a” and “b” that are ordered accordingly, you’d receive a submission of ordering[a]=1&ordering[b]=2, which Rails can translate to "ordering" => { "a" => "1", "b" => "2" }.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

1. Budget 2018

2. Budget 2018 (web)

3. Impact on households: distributional analysis to accompany Budget 2018

4. Table 2.1: Budget 2018 policy decisions

5. 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 component

<%= 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)"
    }
  ]
} %>

Accessibility acceptance criteria

Buttons in this component must:

• be keyboard focusable
• inform the user about which item they operate on
• preserve focus after interacting with them

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

• id - accepts a string for the element ID attribute
• data_attributes - accepts a hash of data attributes
• aria - accepts a hash of aria attributes
• classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
• margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
• role - accepts a space separated string of roles
• lang - accepts a language attribute value
• open - accepts an open attribute value (true or false)
• hidden - accepts an empty string, ‘hidden’, or ‘until-found’
• tabindex - accepts an integer. The integer can also be passed as a string.
• dir - accepts ‘rtl’, ‘ltr’, or ‘auto’.

With description (preview)

1. Budget 2018

   PDF, 2.56MB, 48 pages

2. Budget 2018 (web)

   HTML attachment

3. Impact on households: distributional analysis to accompany Budget 2018

   PDF, 592KB, 48 pages

4. Table 2.1: Budget 2018 policy decisions

   MS Excel Spreadsheet, 248KB

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

   MS Excel Spreadsheet, 248KB

<%= render "govuk_publishing_components/components/reorderable_list", {
  items: [
    {
      id: "ce99dd60-67dc-11eb-ae93-0242ac130002",
      title: "Budget 2018",
      description: "PDF, 2.56MB, 48 pages"
    },
    {
      id: "d321cb86-67dc-11eb-ae93-0242ac130002",
      title: "Budget 2018 (web)",
      description: "HTML attachment"
    },
    {
      id: "63a6d29e-6b6d-4157-9067-84c1a390e352",
      title: "Impact on households: distributional analysis to accompany Budget 2018",
      description: "PDF, 592KB, 48 pages"
    },
    {
      id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85",
      title: "Table 2.1: Budget 2018 policy decisions",
      description: "MS Excel Spreadsheet, 248KB"
    },
    {
      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)",
      description: "MS Excel Spreadsheet, 248KB"
    }
  ]
} %>

Within form (preview)

<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>

With custom input name (preview)

1. Budget 2018

   PDF, 2.56MB, 48 pages

2. Budget 2020

   PDF, 2.56MB, 48 pages

<%= render "govuk_publishing_components/components/reorderable_list", {
  input_name: "attachments[ordering]",
  items: [
    {
      id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9",
      title: "Budget 2018",
      description: "PDF, 2.56MB, 48 pages"
    },
    {
      id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85",
      title: "Budget 2020",
      description: "PDF, 2.56MB, 48 pages"
    }
  ]
} %>