@ons/design-system 49.1.0 → 50.0.1

package/components/checkboxes/_checkbox-macro.njk

@@ -1,11 +1,11 @@
 {% macro onsCheckbox(params) %}
     {% from "components/label/_macro.njk" import onsLabel %}
 
-    <span class="ons-checkbox {{ params.classes }}">
+    <span class="ons-checkbox{% if params.hideLabel is defined and params.hideLabel == true %} ons-checkbox--no-label{% endif %}{{ ' ' + params.classes if params.classes and params.classes is defined else '' }}">
         <input
             type="checkbox"
             id="{{ params.id }}"
-            class="ons-checkbox__input ons-js-checkbox {{ params.inputClasses }}"
+            class="ons-checkbox__input ons-js-checkbox{{ ' ' + params.inputClasses if params.inputClasses and params.inputClasses is defined else '' }}"
             value="{{ params.value }}"
             {% if params.disabled is defined and params.disabled == true %}disabled aria-disabled="true"{%endif %}
             {% if params.name is defined and params.name %} name="{{ params.name }}"{% endif %}

package/components/checkboxes/_checkbox.scss

@@ -82,6 +82,34 @@ $checkbox-padding: 11px;
     }
   }
 
+  &--no-label {
+    & > .ons-checkbox__input {
+      left: auto;
+      position: relative;
+      top: auto;
+      vertical-align: middle;
+
+      &:checked,
+      &:focus {
+        background-color: initial;
+
+        & + .ons-checkbox__label::before {
+          background: none;
+          border: none;
+          box-shadow: none;
+        }
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 3px $color-focus;
+      }
+
+      & + .ons-checkbox__label {
+        @extend .ons-u-vh;
+      }
+    }
+  }
+
   &__label {
     cursor: pointer;
     display: block;

package/components/checkboxes/_macro.njk

@@ -114,11 +114,11 @@
             "attributes": params.attributes,
             "dontWrap": params.dontWrap,
             "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "checkbox": params.mutuallyExclusive.checkbox,
+            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
             "or": params.mutuallyExclusive.or,
             "deselectMessage": params.mutuallyExclusive.deselectMessage,
             "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-            "deselectCheckboxAdjective": params.mutuallyExclusive.deselectCheckboxAdjective,
+            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
             "error": params.error
         }) %}
             {{ fields | safe }}

package/components/date-input/_macro.njk

@@ -96,11 +96,11 @@
             "classes": params.classes,
             "dontWrap": params.dontWrap if numberOfFields > 1 else true,
             "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "checkbox": params.mutuallyExclusive.checkbox,
+            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
             "or": params.mutuallyExclusive.or,
             "deselectMessage": params.mutuallyExclusive.deselectMessage,
             "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-            "deselectCheckboxAdjective": params.mutuallyExclusive.deselectCheckboxAdjective,
+            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
             "error": params.error
         }) %}
             {{ fields | safe }}

package/components/input/_macro.njk

@@ -132,11 +132,11 @@
             "description": params.description,
             "dontWrap": params.dontWrap,
             "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "checkbox": params.mutuallyExclusive.checkbox,
+            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
             "or": params.mutuallyExclusive.or,
             "deselectMessage": params.mutuallyExclusive.deselectMessage,
             "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-            "deselectCheckboxAdjective": params.mutuallyExclusive.deselectCheckboxAdjective,
+            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
             "error": params.error,
             "autosuggestResults": params.autosuggestResults
         }) %}

package/components/modal/modal.js

@@ -52,7 +52,6 @@ export default class Modal {
         document.querySelector('body').classList.add(ie11Class);
       }
 
-      this.makePageContentInert();
       this.saveLastFocusedEl();
 
       if (event) {
@@ -79,20 +78,6 @@ export default class Modal {
     }
   }
 
-  makePageContentInert() {
-    if (document.querySelector('.ons-page')) {
-      document.querySelector('.ons-page').inert = true;
-      document.querySelector('.ons-page').setAttribute('aria-hidden', 'true');
-    }
-  }
-
-  removeInertFromPageContent() {
-    if (document.querySelector('.ons-page')) {
-      document.querySelector('.ons-page').inert = false;
-      document.querySelector('.ons-page').setAttribute('aria-hidden', 'false');
-    }
-  }
-
   isDialogOpen() {
     return this.component['open'];
   }
@@ -111,7 +96,6 @@ export default class Modal {
 
       this.component.close();
       this.setFocusOnLastFocusedEl(this.lastFocusedEl);
-      this.removeInertFromPageContent();
     }
   }
 }

package/components/mutually-exclusive/_macro.njk

@@ -2,9 +2,11 @@
 {% macro onsMutuallyExclusive(params) %}
     {% from "components/fieldset/_macro.njk" import onsFieldset %}
     {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
+    {% from "components/radios/_macro.njk" import onsRadios %}
 
     {# Resolves caller issue in jijna: https://github.com/pallets/jinja/issues/371 #}
     {% set content = caller() %}
+    {% set exclusiveOptionsLength = params.exclusiveOptions | length %}
 
     {% call onsFieldset({
         "id": params.id,
@@ -22,26 +24,41 @@
             {% if params.autosuggestResults is defined and params.autosuggestResults %}
                 {{ params.autosuggestResults | safe }}
             {% endif %}
-            <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
-                <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
-                {{
-                    onsCheckbox({
-                        "id": params.checkbox.id,
-                        "name": params.checkbox.name,
-                        "value": params.checkbox.value,
-                        "checked": params.checkbox.checked,
-                        "classes": params.checkbox.classes,
-                        "attributes": params.checkbox.attributes,
-                        "deselectMessage": params.deselectMessage,
-                        "inputClasses": "ons-js-exclusive-checkbox",
-                        "label": {
-                            "text": '<span class="ons-u-vh">' + params.or + ', </span> ' + params.checkbox.label.text,
-                            "description": params.checkbox.label.description
-                        }
-                    })
-                }}
-            </p>
-            <span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="{{ params.deselectGroupAdjective }}" data-checkbox-adjective="{{ params.deselectCheckboxAdjective }}"></span>
+            {% if exclusiveOptionsLength == 1 %}
+                <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
+                    <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
+                    {{
+                        onsCheckbox({
+                            "id": params.exclusiveOptions[0].id,
+                            "name": params.exclusiveOptions[0].name,
+                            "value": params.exclusiveOptions[0].value,
+                            "checked": params.exclusiveOptions[0].checked,
+                            "classes": params.exclusiveOptions[0].classes,
+                            "attributes": params.exclusiveOptions[0].attributes,
+                            "deselectMessage": params.deselectMessage,
+                            "inputClasses": "ons-js-exclusive-option",
+                            "label": {
+                                "text": '<span class="ons-u-vh">' + params.or + ', </span> ' + params.exclusiveOptions[0].label.text,
+                                "description": params.exclusiveOptions[0].label.description
+                            }
+                        })
+                    }}
+                </p>
+            {% elif exclusiveOptionsLength > 1 %}
+                <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
+                    <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
+                    {{
+                        onsRadios({
+                            "dontWrap": true,
+                            "radios": params.exclusiveOptions,
+                            "inputClasses": "ons-js-exclusive-option",
+                            "name": "mutuallyExclusiveRadio",
+                            "deselectMessage": params.deselectMessage
+                        })
+                    }}
+                </p>
+            {% endif %}
+            <span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="{{ params.deselectGroupAdjective }}" data-option-adjective="{{ params.deselectExclusiveOptionAdjective }}"></span>
         </div>
     {% endcall %}
 {% endmacro %}

package/components/mutually-exclusive/mutually-exclusive.js

@@ -1,8 +1,8 @@
 const exclusiveGroupItemClass = 'ons-js-exclusive-group-item';
-const checkboxClass = 'ons-js-exclusive-checkbox';
+const optionClass = 'ons-js-exclusive-option';
 const voiceOverAlertClass = 'ons-js-exclusive-alert';
 const groupAttrAdjective = 'data-group-adjective';
-const checkboxAttrAdjective = 'data-checkbox-adjective';
+const optionAttrAdjective = 'data-option-adjective';
 const inputAbbrClass = 'ons-js-input-abbr';
 const inputLegendClass = 'ons-js-input-legend';
 
@@ -19,28 +19,28 @@ export default class MutuallyExclusive {
       exclusive: false,
     }));
 
-    const checkboxElement = context.querySelector(`.${checkboxClass}`);
-    this.checkbox = {
-      element: checkboxElement,
-      label: context.querySelector(`label[for=${checkboxElement.id}]`),
-      labelText: this.getElementLabelText(checkboxElement),
-      hasValue: this.inputHasValue(checkboxElement),
+    const exclusiveElements = [...context.getElementsByClassName(optionClass)];
+    this.numberOfExclusiveElements = exclusiveElements.length;
+    this.exclusiveElements = exclusiveElements.map(element => ({
+      element,
+      label: context.querySelector(`label[for=${element.id}]`),
+      labelText: this.getElementLabelText(element),
+      hasValue: this.inputHasValue(element),
       exclusive: true,
-    };
+    }));
 
-    this.allInputs = [...this.groupInputs, this.checkbox];
+    this.allInputs = [...this.groupInputs, ...this.exclusiveElements];
     this.voiceOverAlertElement = context.querySelector(`.${voiceOverAlertClass}`);
     this.groupAdjective = this.voiceOverAlertElement.getAttribute(groupAttrAdjective);
-    this.checkboxAdjective = this.voiceOverAlertElement.getAttribute(checkboxAttrAdjective);
-    this.deselectMessage = this.checkbox.element.getAttribute('data-deselect-message');
+    this.optionAttrAdjective = this.voiceOverAlertElement.getAttribute(optionAttrAdjective);
+    this.deselectMessage = this.exclusiveElements[0].element.getAttribute('data-deselect-message');
 
     this.bindEventListeners();
   }
 
   bindEventListeners() {
     this.allInputs.forEach(input => {
-      const event = input.element.type === 'checkbox' ? 'click' : 'input';
-
+      const event = ['checkbox', 'radio'].includes(input.element.type) ? 'click' : 'input';
       input.element.addEventListener(event, () => this.handleValueChange(input));
     });
   }
@@ -61,7 +61,7 @@ export default class MutuallyExclusive {
           .forEach(input => {
             input.hasValue = false;
 
-            if (input.element.type === 'checkbox') {
+            if (['checkbox', 'radio'].includes(input.element.type)) {
               input.element.checked = false;
               this.triggerEvent(input.element, 'change');
             } else {
@@ -70,11 +70,13 @@ export default class MutuallyExclusive {
             }
           });
       } else if (!input.exclusive) {
-        const input = this.allInputs.find(input => input.exclusive);
-        adjective = this.checkboxAdjective;
+        const inputs = this.allInputs.filter(input => input.exclusive);
+        adjective = this.optionAttrAdjective;
 
-        input.hasValue = false;
-        input.element.checked = false;
+        inputs.forEach(input => {
+          input.hasValue = false;
+          input.element.checked = false;
+        });
 
         this.triggerEvent(input.element, 'change');
       }
@@ -117,7 +119,7 @@ export default class MutuallyExclusive {
   }
 
   inputHasValue(input) {
-    if (input.type === 'checkbox') {
+    if (['checkbox', 'radio'].includes(input.type)) {
       return !!input.checked;
     } else {
       return !!input.value.trim().length;
@@ -142,7 +144,7 @@ export default class MutuallyExclusive {
       deselectMessageElement.innerHTML = `. ${this.deselectMessage}`;
 
       this.deselectMessageElement = deselectMessageElement;
-      this.checkbox.label.appendChild(deselectMessageElement);
+      this.exclusiveElements[0].label.appendChild(deselectMessageElement);
     } else if (this.deselectMessageElement && !groupElementSelected) {
       this.deselectMessageElement.remove();
       this.deselectMessageElement = null;
@@ -150,8 +152,15 @@ export default class MutuallyExclusive {
   }
 
   triggerEvent(input, eventType) {
-    const event = document.createEvent('HTMLEvents');
-    event.initEvent(eventType, false, true);
+    let event;
+    if (typeof Event === 'function') {
+      event = new Event(eventType, { bubbles: false, cancelable: true });
+    } else {
+      // IE11 requires a custom event
+      event = document.createEvent('HTMLEvents');
+      event.initEvent(eventType, false, true);
+    }
+
     input.dispatchEvent(event);
   }
 }

package/components/radios/_macro.njk

@@ -13,30 +13,29 @@
         "legendIsQuestionTitle": params.legendIsQuestionTitle,
         "error": params.error
     }) %}
-    <div class="ons-radios__items">
-        {% for radio in params.radios %}
-            {% if params.or is defined and params.or and loop.revindex0 == 0 %}
-                <span class="ons-radios__label ons-u-mt-s ons-u-fs-r--b" aria-hidden="true">{{ params.or }}
-                </span>
-            {% endif %}
-            <span class="ons-radios__item{{ " ons-radios__item--no-border" if params.borderless }}">
-                <span class="ons-radio{{ " ons-radio--no-border" if params.borderless }}">
-                {%  if radio.other is defined and radio.other and radio.other.selectAllChildren is defined and radio.other.selectAllChildren == true %}
-                    {% set selectAllClass = ' ons-js-select-all-children' %}
-                {% else %}
-                    {% set selectAllClass = '' %}
+        <div class="ons-radios__items">
+            {% for radio in params.radios %}
+                {% if params.or is defined and params.or and loop.revindex0 == 0 %}
+                    <span class="ons-radios__label ons-u-mt-s ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
                 {% endif %}
-                    <input
+                <span class="ons-radios__item{{ " ons-radios__item--no-border" if params.borderless }}">
+                    <span class="ons-radio{{ " ons-radio--no-border" if params.borderless }}">
+                        {%  if radio.other is defined and radio.other and radio.other.selectAllChildren is defined and radio.other.selectAllChildren == true %}
+                            {% set selectAllClass = ' ons-js-select-all-children' %}
+                        {% else %}
+                            {% set selectAllClass = '' %}
+                        {% endif %}
+                        <input
                             type="radio"
                             id="{{ radio.id }}"
-                            class="ons-radio__input ons-js-radio{{ ' ' + radio.classes if radio.classes else '' }}{{ ' ons-js-other' if radio.other else '' }}{{ selectAllClass }}"
+                            class="ons-radio__input ons-js-radio{{ ' ' + params.inputClasses if params.inputClasses and params.inputClasses is defined else '' }}{{ ' ' + radio.classes if radio.classes else '' }}{{ ' ons-js-other' if radio.other else '' }}{{ selectAllClass }}"
                             value="{{ radio.value }}"
                             name="{{ params.name }}"
                             {% if (radio.checked is defined and radio.checked) or (params.value is defined and params.value == radio.value) %} checked {% endif %}
                             {% if radio.other is defined and radio.other and not radio.other.open %} aria-controls="{{ radio.id }}-other-wrap" aria-haspopup="true"{% endif %}
                             {% if radio.attributes is defined and radio.attributes %}{% for attribute, value in (radio.attributes.items() if radio.attributes is mapping and radio.attributes.items else radio.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
                         >
-                    {{ onsLabel({
+                        {{ onsLabel({
                             "id": radio.id + "-label",
                             "for": radio.id,
                             "inputType": "radio",
@@ -44,100 +43,100 @@
                             "classes": "ons-radio__label " + radio.label.classes | default(''),
                             "description": radio.label.description
                         }) }}
-                    {% if radio.other is defined and radio.other %}
-                        {% set otherType = radio.other.otherType | default('input') %}
-                        <span class="ons-radio__other{{ " " + 'ons-radio__other--open' if radio.other.open else "" }}" id="{{ radio.id }}-other-wrap">
-                            {% if otherType == "input" %}
-                                {% from "components/input/_macro.njk" import onsInput %}
-                                {{
-                                    onsInput({
-                                        "id": radio.other.id,
-                                        "name": radio.other.name,
-                                        "type": radio.other.type,
-                                        "required": radio.other.required,
-                                        "classes": ("ons-input--error" if params.error else "") + radio.other.classes | default(''),
-                                        "width": radio.other.width | default('auto'),
-                                        "attributes": radio.other.attributes,
-                                        "label": {
-                                            "id": radio.other.id + "-label",
-                                            "text": radio.other.label.text,
-                                            "classes": 'ons-u-fw-n'
-                                        },
-                                        "dontWrap": true,
-                                        "value": radio.other.value
-                                    })
-                                }}
-                            {% elif otherType == "select" %}
-                                {% from "components/select/_macro.njk" import onsSelect %}
-                                {{
-                                    onsSelect({
-                                        "id": radio.other.id,
-                                        "name": radio.other.name,
-                                        "options": radio.other.options,
-                                        "classes": ("ons-input--error" if params.error else "") + radio.other.classes | default(''),
-                                        "label": {
-                                            "id": radio.other.id + "-label",
-                                            "text": radio.other.label.text,
-                                            "classes": 'ons-u-fw-n'
-                                        },
-                                        "dontWrap": true,
-                                        "value": radio.other.value,
-                                        "select": {
-                                            "error": params.error
-                                        }
-                                    })
-                                }}
-                            {% elif otherType == "checkboxes" %}
-                                {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
-                                {{
-                                    onsCheckboxes({
-                                        "id": radio.other.id,
-                                        "name": radio.other.name,
-                                        "checked": radio.other.checked,
-                                        "borderless": true,
-                                        "legend": radio.other.legend,
-                                        "legendClasses": radio.other.legendClasses,
-                                        "attributes": radio.other.attributes,
-                                        "classes": "ons-js-other-fieldset",
-                                        "checkboxes": radio.other.checkboxes,
-                                        "autoSelect": radio.other.autoSelect,
-                                        "selectAllChildren": radio.other.selectAllChildren
-                                    })
-                                }}
-                            {% elif otherType == "radios" %}
-                                {% from "components/radios/_macro.njk" import onsRadios %}
-                                {{
-                                    onsRadios({
-                                        "id": radio.other.id,
-                                        "name": radio.other.name,
-                                        "borderless": true,
-                                        "legend": radio.other.legend,
-                                        "legendClasses": radio.other.legendClasses | default('') + ' ons-u-mb-xs',
-                                        "attributes": radio.other.attributes,
-                                        "classes": "ons-js-other-fieldset",
-                                        "radios": radio.other.radios
-                                    })
-                                }}
-                            {% endif %}
-                        </span>
-                    {% endif %}
+                        {% if radio.other is defined and radio.other %}
+                            {% set otherType = radio.other.otherType | default('input') %}
+                            <span class="ons-radio__other{{ " " + 'ons-radio__other--open' if radio.other.open else "" }}" id="{{ radio.id }}-other-wrap">
+                                {% if otherType == "input" %}
+                                    {% from "components/input/_macro.njk" import onsInput %}
+                                    {{
+                                        onsInput({
+                                            "id": radio.other.id,
+                                            "name": radio.other.name,
+                                            "type": radio.other.type,
+                                            "required": radio.other.required,
+                                            "classes": ("ons-input--error" if params.error else "") + radio.other.classes | default(''),
+                                            "width": radio.other.width | default('auto'),
+                                            "attributes": radio.other.attributes,
+                                            "label": {
+                                                "id": radio.other.id + "-label",
+                                                "text": radio.other.label.text,
+                                                "classes": 'ons-u-fw-n'
+                                            },
+                                            "dontWrap": true,
+                                            "value": radio.other.value
+                                        })
+                                    }}
+                                {% elif otherType == "select" %}
+                                    {% from "components/select/_macro.njk" import onsSelect %}
+                                    {{
+                                        onsSelect({
+                                            "id": radio.other.id,
+                                            "name": radio.other.name,
+                                            "options": radio.other.options,
+                                            "classes": ("ons-input--error" if params.error else "") + radio.other.classes | default(''),
+                                            "label": {
+                                                "id": radio.other.id + "-label",
+                                                "text": radio.other.label.text,
+                                                "classes": 'ons-u-fw-n'
+                                            },
+                                            "dontWrap": true,
+                                            "value": radio.other.value,
+                                            "select": {
+                                                "error": params.error
+                                            }
+                                        })
+                                    }}
+                                {% elif otherType == "checkboxes" %}
+                                    {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+                                    {{
+                                        onsCheckboxes({
+                                            "id": radio.other.id,
+                                            "name": radio.other.name,
+                                            "checked": radio.other.checked,
+                                            "borderless": true,
+                                            "legend": radio.other.legend,
+                                            "legendClasses": radio.other.legendClasses,
+                                            "attributes": radio.other.attributes,
+                                            "classes": "ons-js-other-fieldset",
+                                            "checkboxes": radio.other.checkboxes,
+                                            "autoSelect": radio.other.autoSelect,
+                                            "selectAllChildren": radio.other.selectAllChildren
+                                        })
+                                    }}
+                                {% elif otherType == "radios" %}
+                                    {% from "components/radios/_macro.njk" import onsRadios %}
+                                    {{
+                                        onsRadios({
+                                            "id": radio.other.id,
+                                            "name": radio.other.name,
+                                            "borderless": true,
+                                            "legend": radio.other.legend,
+                                            "legendClasses": radio.other.legendClasses | default('') + ' ons-u-mb-xs',
+                                            "attributes": radio.other.attributes,
+                                            "classes": "ons-js-other-fieldset",
+                                            "radios": radio.other.radios
+                                        })
+                                    }}
+                                {% endif %}
+                            </span>
+                        {% endif %}
+                    </span>
                 </span>
-            </span>
-            {% if not loop.last %}
-                <br>
-            {% endif %}
-        {% endfor %}
-    </div>
-    {% if params.clearRadios is defined and params.clearRadios %}
-        {{ onsButton({
+                {% if not loop.last %}
+                    <br>
+                {% endif %}
+            {% endfor %}
+        </div>
+        {% if params.clearRadios is defined and params.clearRadios %}
+            {{ onsButton({
                 "text": params.clearRadios.text,
                 "name": params.clearRadios.name,
                 "type": "submit",
                 "classes": "ons-js-clear-btn ons-u-mt-s ons-u-db-no-js_enabled",
                 "variants": ["secondary", "small"]
             }) }}
-        <span class="ons-js-clear-radio-alert ons-u-vh" role="alert" aria-live="polite" data-clear="{{ params.clearRadios.ariaClearText }}" data-cleared="{{ params.clearRadios.ariaClearedText }}"></span>
-    {% endif %}
+            <span class="ons-js-clear-radio-alert ons-u-vh" role="alert" aria-live="polite" data-clear="{{ params.clearRadios.ariaClearText }}" data-cleared="{{ params.clearRadios.ariaClearedText }}"></span>
+        {% endif %}
     {% endcall %}
 
 {% endmacro %}

package/components/textarea/_macro.njk

@@ -50,11 +50,11 @@
             "description": params.description,
             "dontWrap": params.dontWrap,
             "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "checkbox": params.mutuallyExclusive.checkbox,
+            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
             "or": params.mutuallyExclusive.or,
             "deselectMessage": params.mutuallyExclusive.deselectMessage,
             "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-            "deselectCheckboxAdjective": params.mutuallyExclusive.deselectCheckboxAdjective,
+            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
             "error": params.error
         }) %}
             {% call onsField({