1. Collections Component Guide
  2. Form checkboxes
  3. Checkbox items with conditional reveal checked
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.

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