{% extends "look-and-feel/layouts/two_thirds.html" %} {% from "look-and-feel/components/header.njk" import header %} {% from "look-and-feel/components/fields.njk" import selectionButtons, selectionButton, textbox %} {% block head -%} {% endblock %} {% block two_thirds -%} {{ header("Selection Buttons", "Components") }} {% set field = { id: 'country', name: 'country' } %}

To use this field you need to import it in to your template.

{{ header('Code', size='small') }}
{% raw %}{% from "look-and-feel/components/fields.njk" import selectionButtons, selectionButton %}
{% endraw %}
{{ header("Multiple radio options", size="medium") }}
{{ selectionButtons(field, "Where do you live?", hint = 'Some advice about the question', hideQuestion = false, options = [ { label: "Northern Ireland", value: "northern-ireland" }, { label: "Scotland" }, { label: "England" }, { label: "Wales" } ] ) }}
{{ header('Code', size='small') }}
{% raw %}{{ selectionButtons(field, "Where do you live?",
  hint = 'Some advice about the question',
  hideQuestion = false,
  options = [
    { label: "Northern Ireland", value: "northern-ireland" },
    { label: "Scotland" },
    { label: "England" },
    { label: "Wales" }
  ]
) }}{% endraw %}
{{ header("Inline radio options", size="medium") }}
{{ selectionButtons(field, "Do you have your marriage certificate?", hideQuestion = false, inline = true, options = [ { label: "Yes" }, { label: "No" } ] ) }}
{{ header('Code', size='small') }}
{% raw %}{{ selectionButtons(field, "Do you have your marriage certificate?",
  hideQuestion = false,
  inline = true,
  options = [
    { label: "Yes" },
    { label: "No" }
  ]
) }}{% endraw %}
{{ header("Disable options", size="medium") }}
{{ selectionButtons(field, "A question", hideQuestion = true, options = [ { label: "Isle of Man or the Channel Islands", disabled: true } ] ) }}
{{ header('Code', size='small') }}
{% raw %}{{ selectionButtons(field, "A question",
  hideQuestion = true,
  options = [
    { label: "Isle of Man or the Channel Islands", disabled: true }
  ]
) }}{% endraw %}
{{ header("Checkboxes", size="medium") }}
{{ selectionButtons(field, "Which types of waste do you transport regularly?", hideQuestion = false, hint = 'Select all that apply', type = 'checkbox', options = [ { label: "Waste from animal carcasses", value: 'animal' }, { label: "Waste from mines or quarries", value: 'mines' }, { label: "Farm or agricultural waste", value: 'agriculture' } ] ) }}
{{ header('Code', size='small') }}
{% raw %}{{ selectionButtons(field, "A question",
  hideQuestion = true,
  options = [
    { label: "Isle of Man or the Channel Islands", disabled: true }
  ]
) }}{% endraw %}
{{ header("Conditionally revealing content", size="medium") }}
{% set field = { id: 'hwf', name: 'hwf' } %} {{ selectionButtons(field, "Do have a Help with Fees reference number?", hideQuestion = false, inline = true, options = [ { label: "Yes", target: "hwf-ref-number" }, { label: "No" } ] ) }}
{{ textbox(field, "Enter your reference number") }}
{{ header('Code', size='small') }}
{% raw %}{{ selectionButtons(field, "Do have a Help with Fees reference number?",
  hideQuestion = false,
  inline = true,
  options = [
    { label: "Yes", target: "hwf-ref-number" },
    { label: "No" }
  ]
) }}
<div class="panel panel-border-wide js-hidden" id="hwf-ref-number">
  {{ textbox(field, "Enter your reference number") }}
</div>{% endraw %}
{{ header("Nesting revealing content", size="medium") }}
{% set field = { id: 'contact', name: 'contact' } %} {% set detailField = { id: 'contactDetail', name: 'contactDetail' } %} {% call selectionButtons(field, "How do you want to be contacted?", hideQuestion = false) %} {{ selectionButton(field, { label: "Email", target: "email-address" }) }}
{{ textbox(detailField, "Email address") }}
{{ selectionButton(field, { label: "Phone", target: "phone-number" }) }}
{{ textbox(detailField, "Phone number") }}
{{ selectionButton(field, { label: "Text message", target: "mobile-number" }) }}
{{ textbox(detailField, "Mobile phone number") }}
{% endcall %}
{{ header('Code', size='small') }}
{% raw %}{% call selectionButtons(field,
                         "How do you want to be contacted?",
                         hideQuestion = false) %}
  {{ selectionButton(field, { label: "Email", target: "email-address" }) }}
  <div class="panel panel-border-wide js-hidden" id="email-address">
    {{ textbox(detailField, "Email address") }}
  </div>

  {{ selectionButton(field, { label: "Phone", target: "phone-number" }) }}
  <div class="panel panel-border-wide js-hidden" id="phone-number">
    {{ textbox(detailField, "Phone number") }}
  </div>

  {{ selectionButton(field, { label: "Text message", target: "mobile-number" }) }}
  <div class="panel panel-border-wide js-hidden" id="mobile-number">
    {{ textbox(detailField, "Mobile phone number") }}
  </div>
{% endcall %}{% endraw %}
{% set field = { id: 'response', name: 'response' } %} {{ header("Choice description", size="medium") }}
{{ selectionButtons(field, "How do you want to respond?", options = [ { label: "I will let the divorce proceed", value: "proceed", description: "Choose this option if you don't want to try to prevent the divorce" }, { label: "I disagree with the application for divorce", value: "disagree", description: "Choose this option if you want to try to prevent the divorce" } ], type='radio' ) }}
{{ header('Code', size='small') }}

{% raw %}{{ selectionButtons(field, "How do you want to respond?",
  options = [
      {
        label: "I will let the divorce proceed",
        value: "proceed",
        description: "Choose this option if you don't want to try to prevent the divorce"
      },
      {
        label: "I disagree with the application for divorce",
        value: "disagree",
        description: "Choose this option if you want to try to prevent the divorce"
      }
  ],
  type='radio'
)}}{% endraw %}
    
{%- endblock %}