Form checkboxes example

With description text and header

If a description text is added with a page heading, it is displayed under the heading but before the hint text. The description text can only render text and not govspeak specific syntax. This is a pattern that is used across GOV.UK where a question is followed by a description.

How it looks (preview)

Choose your favourite skittles

Skittles consist of hard sugar shells imprinted with the letter "S". The interior consists mainly of sugar, corn syrup, and hydrogenated palm kernel oil along with fruit juice, citric acid, natural and artificial flavors.

Taste the rainbow

How to call this example

<%= render "govuk_publishing_components/components/checkboxes", {
  name: "favourite_skittle[]",
  heading: "Choose your favourite skittles",
  is_page_heading: true,
  description: "Skittles consist of hard sugar shells imprinted with the letter \"S\".
    The interior consists mainly of sugar, corn syrup, and hydrogenated
    palm kernel oil along with fruit juice, citric acid, natural and artificial flavors.
    ",
  hint_text: "Taste the rainbow",
  items: [
    {
      label: "Red",
      value: "red"
    },
    {
      label: "Green",
      value: "green"
    },
    {
      label: "Blue",
      value: "blue"
    }
  ]
} %>