Merge pull request #1105 from nhsuk/make-it-easier-to-set-checkbox-ra…

…dio-checked-options Make it easier to set checkbox radio checked options
nhsuk · Feb 12, 2025 · 42dcf6a · 42dcf6a
2 parents 4bbcd5d + 5024a9c
commit 42dcf6a
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # NHS.UK frontend Changelog
 
+## Unreleased
+
+:new: **New features**
+
+- Make it easier to set checkbox and radio checked items ([PR 1105](/~https://github.com/nhsuk/nhsuk-frontend/pull/1105))
+
 ## 9.2.0 - 12 February 2025
 
 :wrench: **Fixes**

diff --git a/app/components/checkboxes/index.njk b/app/components/checkboxes/index.njk
@@ -20,6 +20,7 @@
                   "classes": "nhsuk-fieldset__legend--m"
                 }
               },
+              "values": ["british"],
               "hint": {
                 "text": "If you have more than 1 nationality, select all options that are relevant to you."
               },

diff --git a/app/components/radios/index.njk b/app/components/radios/index.njk
@@ -22,15 +22,15 @@
             "hint": {
               "text": "This includes changing your last name or spelling your name differently."
             },
+            "value": "no",
             "items": [
               {
                 "value": "yes",
                 "text": "Yes"
               },
               {
                 "value": "no",
-                "text": "No",
-                "checked": true
+                "text": "No"
               }
             ]
           }) }}

diff --git a/packages/components/checkboxes/template.njk b/packages/components/checkboxes/template.njk
@@ -53,9 +53,11 @@
 	  {%- if item.divider %}
     <div class="nhsuk-checkboxes__divider">{{ item.divider }}</div>
     {%- else %}
+    {% set isChecked = item.checked | default((item.value in params.values and item.checked != false) if params.values else false, true) %}
+
     <div class="nhsuk-checkboxes__item">
       <input class="nhsuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
-      {{-" checked" if item.checked }}
+      {{-" checked" if isChecked }}
       {{-" disabled" if item.disabled }}
       {%- if item.exclusive %} data-checkbox-exclusive{% endif -%}
       {%- if item.exclusiveGroup %} data-checkbox-exclusive-group="{{ item.exclusiveGroup }}"{% endif -%}
@@ -80,7 +82,7 @@
       {%- endif %}
     </div>
     {% if item.conditional %}
-    <div class="nhsuk-checkboxes__conditional{% if not item.checked %} nhsuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
+    <div class="nhsuk-checkboxes__conditional{% if not isChecked %} nhsuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
       {{ item.conditional.html | safe }}
     </div>
     {% endif %}

diff --git a/packages/components/radios/template.njk b/packages/components/radios/template.njk
@@ -53,9 +53,10 @@
     {%- else %}
     {%- set hasHint = true if item.hint.text or item.hint.html %}
     {%- set itemHintId = id + '-item-hint' %}
+    {% set isChecked = item.checked | default((item.value == params.value and item.checked != false) if params.value else false, true) %}
     <div class="nhsuk-radios__item">
       <input class="nhsuk-radios__input" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
-      {{-" checked" if item.checked }}
+      {{-" checked" if isChecked }}
       {{-" disabled" if item.disabled }}
       {%- if item.conditional.html %} aria-controls="{{ conditionalId }}" aria-expanded="{{"true" if item.checked else "false"}}"{% endif -%}
       {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
@@ -78,7 +79,7 @@
       {%- endif %}
     </div>
     {% if item.conditional.html %}
-    <div class="nhsuk-radios__conditional{% if not item.checked %} nhsuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
+    <div class="nhsuk-radios__conditional{% if not isChecked %} nhsuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
       {{ item.conditional.html | safe }}
     </div>
     {% endif %}