checkbox.nunj

<form action="address" method="post">

  {% call govukFieldset({
      legend: {
          text: "How do you want to be contacted?",
          classes: "govuk-fieldset__legend--l",
          isPageHeading: true
      },
      classes: 'govuk-!-margin-top-6'
  }) %}
  
      {% set emailHtml %}
          {{ govukInput({
              id: "contact-by-email",
              name: "contact-by-email",
              classes: "govuk-!-width-one-half",
              label: {
                  text: "Email address"
              }
          }) }}
      {% endset -%}

      {% set phoneHtml %}
          {{ govukInput({
              id: "contact-by-phone",
              name: "contact-by-phone",
              classes: "govuk-!-width-one-half",
              label: {
                  text: "UK contact number"
              }
          }) }}
      {% endset -%}

      {% set textHtml %}
          {{ govukInput({
              id: "contact-by-text",
              name: "contact-by-text",
              classes: "govuk-!-width-one-half",
              label: {
                  text: "Mobile phone number"
              }
          }) }}
      {% endset -%}

      {{ govukCheckboxes({
          idPrefix: 'contact-preference',
          name: 'contact-preference',
          items: [
              {
                  value: "contact-preference-text",
                  text: "Text message",
                  conditional: {
                      html: textHtml
                  },
                  checked: data['contact-preference'] === 'contact-preference-text'
              },
              {
                  value: "contact-preference-phone",
                  text: "Phone",
                  conditional: {
                      html: phoneHtml
                  },
                  checked: data['contact-preference'] === 'contact-preference-phone'
              },
              {
                  value: "contact-preference-email",
                  text: "Email",
                  conditional: {
                      html: emailHtml
                  },
                  checked: data['contact-preference'] === 'contact-preference-email'
              }
          ]
      })
      }}

  {% endcall %}


  {{ govukButton({
      text: "Continue"
  }) }}
</form>