{% 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.
{% raw %}{% from "look-and-feel/components/fields.njk" import selectionButtons, selectionButton %}
{% endraw %}
{% 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 %}
{% raw %}{{ selectionButtons(field, "Do you have your marriage certificate?",
hideQuestion = false,
inline = true,
options = [
{ label: "Yes" },
{ label: "No" }
]
) }}{% endraw %}
{% raw %}{{ selectionButtons(field, "A question",
hideQuestion = true,
options = [
{ label: "Isle of Man or the Channel Islands", disabled: true }
]
) }}{% endraw %}
{% raw %}{{ selectionButtons(field, "A question",
hideQuestion = true,
options = [
{ label: "Isle of Man or the Channel Islands", disabled: true }
]
) }}{% endraw %}
{% 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 %}
{% 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 %}
{% 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 %}