1. Collections Component Guide
  2. Form checkboxes
  3. Checkbox items with nested checkboxes
Form checkboxes example

Checkbox items with nested checkboxes

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?",
  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"
        }
      ]
    }
  ]
} %>