Form checkboxes example

With page header and caption

If a caption text is provided with a page heading, it will be displayed above the heading. A caption can only be used with a page heading. If a heading is not provided the caption will not render. The pattern is used across GOV.UK to show a high-level section that this page question falls into.

How it looks (preview)

Question 3 of 9

Choose your favourite skittles

Select all that apply.

Red

Green

Blue

How to call this example

<%= render "govuk_publishing_components/components/checkboxes", {
  name: "favourite_skittle[]",
  heading: "Choose your favourite skittles",
  heading_caption: "Question 3 of 9",
  is_page_heading: true,
  items: [
    {
      label: "Red",
      value: "red"
    },
    {
      label: "Green",
      value: "green"
    },
    {
      label: "Blue",
      value: "blue"
    }
  ]
} %>