Form checkboxes example

With a hidden heading

If the heading/legend on the checkboxes is not required, it can be visually hidden using this option. It will still be visible to screen readers.

How it looks (preview)

What is your favourite colour?

Select all that apply.

How to call this example

<%= render "govuk_publishing_components/components/checkboxes", {
  name: "favourite_colour[]",
  heading: "What is your favourite colour?",
  visually_hide_heading: true,
  items: [
    {
      label: "Red",
      value: "red"
    },
    {
      label: "Green",
      value: "green"
    },
    {
      label: "Blue",
      value: "blue"
    }
  ]
} %>