Form checkboxes example

Checkbox items with nested checkboxes

How it looks (preview)

What is your favourite colour?

Select all that apply.

Red

Light Red

Dark Red

Blue

Light blue

Dark blue

Other

Orange

Puce

How to call this example

<%= render "govuk_publishing_components/components/checkboxes", {
  name: "favourite_colour[]",
  heading: "What is your favourite colour?",
  items: [
    {
      label: "Red",
      value: "red",
      items: [
        {
          label: "Light Red",
          value: "light_red"
        },
        {
          label: "Dark Red",
          value: "dark_red"
        }
      ]
    },
    {
      label: "Blue",
      value: "blue",
      items: [
        {
          label: "Light blue",
          value: "light_blue"
        },
        {
          label: "Dark blue",
          value: "dark_blue"
        }
      ]
    },
    {
      label: "Other",
      value: "other",
      items: [
        {
          label: "Orange",
          value: "orange"
        },
        {
          label: "Puce",
          value: "puce"
        }
      ]
    }
  ]
} %>