Form checkboxes example

Checkboxes with data attributes

Data attributes for tracking can be applied as shown. Custom JavaScript in the component will fire identical tracking events on check and uncheck. See below to send different events on uncheck.

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/checkboxes", {
  name: "With tracking",
  items: [
    {
      label: "Tracked",
      value: "tracked",
      data_attributes: {
        track_category: "checkboxClicked",
        track_label: "/news-and-communications",
        track_action: "news",
        track_options: {
          dimension28: 2,
          dimension29: "Tracked"
        }
      }
    }
  ]
} %>