Form checkboxes example

Checkbox items with conditional reveal

Checkboxes can be configured to show additional elements when checked. This could include further components, such as text inputs as shown.

Note that if you do insert HTML, this may cause accessibility violations if the additional elements have different name attributes to the checkboxes. No styling will be applied to the inserted content by the component.

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: "contactingme[]",
  id: "contactingme",
  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-0\">Email address</label><input class=\"govuk-input govuk-!-width-one-third\" id=\"contact-by-email-0\" name=\"contactingme\" type=\"email\"></div>")
    },
    {
      label: "Phone",
      value: "phone",
      conditional: sanitize("<div class=\"govuk-form-group\"><label class=\"govuk-label\" for=\"contact-by-phone-0\">Phone number</label><input class=\"govuk-input govuk-!-width-one-third\" id=\"contact-by-phone-0\" 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-0\">Mobile phone number</label><input class=\"govuk-input govuk-!-width-one-third\" id=\"contact-by-text-0\" name=\"contactingme\" type=\"tel\"></div>")
    }
  ]
} %>