Form checkboxes example

Checkbox items with conditional reveal checked

How it looks (preview)

How would you like to be contacted?

Please select all options that are relevant to you.

Email address

Phone

Phone number

Text message

Mobile phone number

How to call this example

<%= render "govuk_publishing_components/components/checkboxes", {
  name: "contacting-checked[]",
  id: "contacting-checked",
  heading: "How would you like to be contacted?",
  hint_text: "Please select all options that are relevant to you.",
  items: [
    {
      label: "Email",
      value: "email",
      conditional: sanitize("<div class=\"govuk-form-group\"><label class=\"govuk-label\" for=\"contact-by-email-1\">Email address</label><input class=\"govuk-input govuk-!-width-one-third\" id=\"contact-by-email-1\" name=\"contactingme\" type=\"email\"></div>"),
      checked: true
    },
    {
      label: "Phone",
      value: "phone",
      conditional: sanitize("<div class=\"govuk-form-group\"><label class=\"govuk-label\" for=\"contact-by-phone-1\">Phone number</label><input class=\"govuk-input govuk-!-width-one-third\" id=\"contact-by-phone-1\" name=\"contactingme\" type=\"tel\"></div>")
    },
    {
      label: "Text message",
      value: "text",
      conditional: sanitize("<div class=\"govuk-form-group\"><label class=\"govuk-label\" for=\"contact-by-text-1\">Mobile phone number</label><input class=\"govuk-input govuk-!-width-one-third\" id=\"contact-by-text-1\" name=\"contactingme\" type=\"tel\"></div>")
    }
  ]
} %>