Fieldset Legend in Checkboxgroup

Pavitra Khatri · ci-build · commit 0d3d22117741 · 2025-06-06T05:06:34.000Z
diff --git a/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/checkboxgroup/.content.xml b/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/checkboxgroup/.content.xml
@@ -3,5 +3,5 @@
   jcr:primaryType="cq:Component"
   jcr:title="Adaptive Form CheckBox Group"
   jcr:description="Add checkboxes to select one or more of the available options."
-  sling:resourceSuperType="core/fd/components/form/checkboxgroup/v1/checkboxgroup"
+  sling:resourceSuperType="core/fd/components/form/checkboxgroup/v2/checkboxgroup"
   componentGroup="Core Components Examples - Adaptive Form"/>
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/.content.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:rep="internal"
+    jcr:mixinTypes="[rep:AccessControllable]"
+    jcr:primaryType="sling:Folder"
+    hidden="true"/>
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/basic/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/basic/.content.xml
@@ -63,7 +63,7 @@
                     jcr:lastModifiedBy="admin"
                     jcr:primaryType="nt:unstructured"
                     jcr:title="Check Box Group 3"
-                    sling:resourceType="forms-components-examples/components/form/checkboxgroup"
+                    sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup"
                     enabled="{Boolean}true"
                     enum="[0,1]"
                     enumNames="[Item 1, Item 2]"
@@ -118,7 +118,7 @@
                     jcr:lastModifiedBy="admin"
                     jcr:primaryType="nt:unstructured"
                     jcr:title="Check Box Group 5"
-                    sling:resourceType="forms-components-examples/components/form/checkboxgroup"
+                    sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup"
                     enabled="{Boolean}true"
                     enum="[0,1]"
                     enumNames="[Item 1, Item 2]"
@@ -141,7 +141,7 @@
                     jcr:lastModifiedBy="admin"
                     jcr:primaryType="nt:unstructured"
                     jcr:title="Check Box Group 6"
-                    sling:resourceType="forms-components-examples/components/form/checkboxgroup"
+                    sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup"
                     enabled="{Boolean}true"
                     enum="[0,1,0]"
                     enumNames="[Item 1, Item 2,Item 3]"
@@ -160,7 +160,7 @@
                     jcr:lastModifiedBy="admin"
                     jcr:primaryType="nt:unstructured"
                     jcr:title="&lt;p>&lt;b>Select Animal&lt;/b>&lt;/p>"
-                    sling:resourceType="forms-components-examples/components/form/checkboxgroup"
+                    sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup"
                     areOptionsRichText="true"
                     enabled="{Boolean}true"
                     enum="[0,1]"
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/focustest/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/focustest/.content.xml
@@ -9,7 +9,7 @@
         jcr:language="en"
         jcr:primaryType="cq:PageContent"
         jcr:title="focustest"
-        sling:configRef="/conf/forms/core-components-it/samples/checkboxgroup/focustest/"
+        sling:configRef="/conf/forms/core-components-it/samples/checkboxgroup/checkboxgroupv1/focustest/"
         sling:resourceType="forms-components-examples/components/page">
         <guideContainer
             fd:version="2.1"
@@ -46,7 +46,7 @@
                 jcr:lastModifiedBy="admin"
                 jcr:primaryType="nt:unstructured"
                 jcr:title="Check Box Group"
-                sling:resourceType="forms-components-examples/components/form/checkboxgroup"
+                sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup"
                 enum="[0,1]"
                 enumNames="[Item 1, Item 2]"
                 fieldType="checkbox-group"
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/.content.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:rep="internal"
+    jcr:mixinTypes="[rep:AccessControllable]"
+    jcr:primaryType="sling:Folder"
+    hidden="true"/>
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/basic/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/basic/.content.xml
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/focustest/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/focustest/.content.xml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
+    jcr:primaryType="cq:Page">
+    <jcr:content
+        cq:deviceGroups="[/etc/mobile/groups/responsive]"
+        cq:lastModified="{Date}2023-10-19T13:14:31.885+05:30"
+        cq:lastModifiedBy="admin"
+        cq:template="/conf/core-components-examples/settings/wcm/templates/af-blank-v2"
+        jcr:language="en"
+        jcr:primaryType="cq:PageContent"
+        jcr:title="focustest"
+        sling:configRef="/conf/forms/core-components-it/samples/checkboxgroup/checkboxgroupv2/focustest/"
+        sling:resourceType="forms-components-examples/components/page">
+        <guideContainer
+            fd:version="2.1"
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="forms-components-examples/components/form/container"
+            dorType="none"
+            fieldType="form"
+            thankYouOption="page"
+            themeRef="/libs/fd/af/themes/canvas"
+            title="focustest">
+            <button
+                jcr:created="{Date}2023-10-19T13:13:52.618+05:30"
+                jcr:createdBy="admin"
+                jcr:lastModified="{Date}2023-10-19T13:13:52.618+05:30"
+                jcr:lastModifiedBy="admin"
+                jcr:primaryType="nt:unstructured"
+                jcr:title="Button"
+                sling:resourceType="forms-components-examples/components/form/button"
+                dorExclusion="true"
+                fieldType="button"
+                name="button1697701432805">
+                <fd:rules
+                    fd:click="[{&quot;nodeName&quot;:&quot;ROOT&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;STATEMENT&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;EVENT_SCRIPTS&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;EVENT_CONDITION&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;EVENT_AND_COMPARISON&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;COMPONENT&quot;\,&quot;value&quot;:{&quot;id&quot;:&quot;$form.button1697701432805&quot;\,&quot;type&quot;:&quot;BUTTON&quot;\,&quot;name&quot;:&quot;button1697701432805&quot;}}\,{&quot;nodeName&quot;:&quot;EVENT_AND_COMPARISON_OPERATOR&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;is clicked&quot;\,&quot;value&quot;:null}}\,{&quot;nodeName&quot;:&quot;PRIMITIVE_EXPRESSION&quot;\,&quot;choice&quot;:null}]}\,&quot;nested&quot;:false}\,{&quot;nodeName&quot;:&quot;Then&quot;\,&quot;value&quot;:null}\,{&quot;nodeName&quot;:&quot;BLOCK_STATEMENTS&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;BLOCK_STATEMENT&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;SET_FOCUS&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;to&quot;\,&quot;value&quot;:null}\,{&quot;nodeName&quot;:&quot;AFCOMPONENT&quot;\,&quot;value&quot;:{&quot;id&quot;:&quot;$form.checkboxgroup1697701437345&quot;\,&quot;displayName&quot;:&quot;Check Box Group&quot;\,&quot;type&quot;:&quot;AFCOMPONENT&quot;\,&quot;displayPath&quot;:&quot;FORM/Check Box Group/&quot;\,&quot;name&quot;:&quot;checkboxgroup1697701437345&quot;\,&quot;parent&quot;:&quot;$form&quot;}}]}}]}]}}]\,&quot;isValid&quot;:true\,&quot;enabled&quot;:true\,&quot;version&quot;:1\,&quot;script&quot;:[&quot;setFocus(checkboxgroup1697701437345)&quot;]\,&quot;eventName&quot;:&quot;Click&quot;\,&quot;ruleType&quot;:&quot;&quot;\,&quot;description&quot;:&quot;&quot;}]"
+                    jcr:primaryType="nt:unstructured"
+                    validationStatus="valid"/>
+                <fd:events
+                    jcr:primaryType="nt:unstructured"
+                    click="[setFocus(checkboxgroup1697701437345)]"/>
+            </button>
+            <checkboxgroup
+                jcr:created="{Date}2023-10-19T13:13:56.745+05:30"
+                jcr:createdBy="admin"
+                jcr:lastModified="{Date}2023-10-19T13:13:56.745+05:30"
+                jcr:lastModifiedBy="admin"
+                jcr:primaryType="nt:unstructured"
+                jcr:title="Check Box Group"
+                sling:resourceType="core/fd/components/form/checkboxgroup/v2/checkboxgroup"
+                enum="[0,1]"
+                enumNames="[Item 1, Item 2]"
+                fieldType="checkbox-group"
+                name="checkboxgroup1697701437345"
+                type="number[]"/>
+        </guideContainer>
+    </jcr:content>
+</jcr:root>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/legend.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/legend.html
@@ -0,0 +1,7 @@
+<template data-sly-template.legend="${@ componentId, labelValue, labelVisible, labelRichText, bemBlock}">
+    <legend class="${bemBlock}__legend"
+            data-sly-test="${labelValue && (labelVisible == null || labelVisible == true)}">
+      <span class="${bemBlock}__group-label"
+            data-richtext="${labelRichText}">${labelValue @ context = labelRichText ? 'html' : 'text'}</span>
+    </legend>
+  </template>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/.content.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright 2025 Adobe
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="nt:unstructured">
+    <checkboxgroup/>
+</jcr:root>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/.content.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    cq:icon="select"
+    jcr:description="Allows visitors to input checkbox"
+    jcr:primaryType="cq:Component"
+    jcr:title="Adaptive Form Check Box Group (v2)"
+    sling:resourceSuperType="core/fd/components/form/checkboxgroup/v1/checkboxgroup"
+    componentGroup=".core-adaptiveform"/>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/checkboxgroup.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/checkboxgroup.html
@@ -0,0 +1,49 @@
+<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright 2025 Adobe
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
+  <sly data-sly-use.renderer="${'checkboxgroup.js'}"
+     data-sly-use.widget="widget.html"
+     data-sly-use.clientlib="${'/libs/granite/sightly/templates/clientlib.html'}"
+     data-sly-use.label="${renderer.labelPath}"
+     data-sly-use.legend="${renderer.legendPath}"
+     data-sly-use.shortDescription="${renderer.shortDescriptionPath}"
+     data-sly-use.longDescription="${renderer.longDescriptionPath}"
+     data-sly-use.errorMessage="${renderer.errorMessagePath}"
+     data-sly-use.questionMark="${renderer.questionMarkPath}"></sly>
+     
+
+<div class="cmp-adaptiveform-checkboxgroup cmp-adaptiveform-checkboxgroup--v2"
+     data-cmp-is="adaptiveFormCheckBoxGroup"
+     id="${checkboxgroup.id}"
+     data-sly-use.formstructparser="com.adobe.cq.forms.core.components.models.form.FormStructureParser"
+     data-sly-use.checkboxgroup="com.adobe.cq.forms.core.components.models.form.CheckBoxGroup"
+     data-cmp-visible="${checkboxgroup.visible ? 'true' : 'false'}"
+     data-cmp-enabled="${checkboxgroup.enabled ? 'true' : 'false'}"
+     data-cmp-required="${checkboxgroup.required ? 'true': 'false'}"
+     data-cmp-readonly="${checkboxgroup.readOnly ? 'true' : 'false'}"
+     data-cmp-data-layer="${checkboxgroup.data.json}"
+     data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
+     data-sly-test.widgetId="${'{0}-{1}' @ format=[checkboxgroup.id, 'widget']}">
+
+<!-- <div data-sly-call="${questionMark.questionMark @componentId=checkboxgroup.id, longDescription=checkboxgroup.description, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap></div> -->
+    
+    <sly data-sly-call="${widget.widget @ checkboxgroup = checkboxgroup, legend=legend, questionMark=questionMark, widgetId=widgetId}"></sly>
+
+    <div data-sly-call="${shortDescription.shortDescription @componentId=checkboxgroup.id, shortDescriptionVisible=checkboxgroup.tooltipVisible, shortDescription=checkboxgroup.tooltip, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap></div>
+
+    <div data-sly-call="${longDescription.longDescription @componentId=checkboxgroup.id, longDescription=checkboxgroup.description, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap></div>
+
+    <div data-sly-call="${errorMessage.errorMessage @componentId=checkboxgroup.id, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap></div>
+</div>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/checkboxgroup.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/checkboxgroup.js
@@ -0,0 +1,35 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2025 Adobe
+ ~
+ ~ Licensed under the Apache License, Version 2.0 (the "License");
+ ~ you may not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+
+ use(function () {
+
+    var clientlibsArr = ['core.forms.components.base.v1.editor'];
+    var labelPath = 'core/fd/components/af-commons/v1/fieldTemplates/label.html';
+    var shortDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/shortDescription.html";
+    var longDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/longDescription.html";
+    var questionMarkPath = "core/fd/components/af-commons/v1/fieldTemplates/questionMark.html"
+    var errorMessagePath = "core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html";
+    var legendPath = "core/fd/components/af-commons/v1/fieldTemplates/legend.html"
+    return {
+      labelPath: labelPath,
+      shortDescriptionPath: shortDescriptionPath,
+      longDescriptionPath: longDescriptionPath,
+      questionMarkPath: questionMarkPath,
+      errorMessagePath: errorMessagePath,
+      legendPath: legendPath,
+      clientlibs: clientlibsArr
+    }
+  });
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/widget.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/widget.html
@@ -0,0 +1,37 @@
+<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright 2025 Adobe
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
+<template data-sly-template.widget="${ @ checkboxgroup, legend, questionMark, widgetId}">
+    <fieldset class="cmp-adaptiveform-checkboxgroup__widget cmp-adaptiveform-checkboxgroup__widget--v2 ${checkboxgroup.orientation}" id="${widgetId}">
+        <sly data-sly-call="${legend.legend @ componentId=widgetId, labelValue=checkboxgroup.label.value, labelVisible=checkboxgroup.label.visible, labelRichText=checkboxgroup.label.richText, bemBlock='cmp-adaptiveform-checkboxgroup'}"></sly>
+        <div data-sly-call="${questionMark.questionMark @componentId=checkboxgroup.id, longDescription=checkboxgroup.description, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap></div>
+        <div data-sly-list="${checkboxgroup.enums}" data-sly-unwrap>
+            <div class="cmp-adaptiveform-checkboxgroup-item ${checkboxgroup.name}">
+                <label class="cmp-adaptiveform-checkboxgroup__option-label"
+                       title="${checkboxgroup.tooltipVisible ? '' : checkboxgroup.tooltipText}">
+                    <input class="cmp-adaptiveform-checkboxgroup__option__widget"
+                           type="checkbox"
+                           name="${checkboxgroup.name}"
+                           value="${checkboxgroup.enums[itemList.index].toString}"
+                           checked="${checkboxgroup.enums[itemList.index] in checkboxgroup.default }"
+                           disabled="${!checkboxgroup.enabled || checkboxgroup.readOnly}"
+                           aria-readonly="${checkboxgroup.readOnly ? 'true' : ''}"
+                           aria-label="${checkboxgroup.label.value}: ${checkboxgroup.enumNames[itemList.index]}" />
+                    <span>${checkboxgroup.enumNames[itemList.index] @ context = 'html'}</span>
+                </label>
+            </div>
+        </div>
+    </fieldset>
+</template>
diff --git a/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.cy.js b/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.cy.js
@@ -15,7 +15,7 @@
  ******************************************************************************/
 describe("Form Runtime with CheckBoxGroup Input", () => {
 
-    const pagePath = "content/forms/af/core-components-it/samples/checkboxgroup/basic.html"
+    const pagePath = "content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/basic.html"
     const bemBlock = 'cmp-adaptiveform-checkboxgroup'
     const IS = "adaptiveFormCheckBoxGroup"
     const selectors = {
@@ -253,7 +253,7 @@ describe("Form Runtime with CheckBoxGroup Input", () => {
 
 describe("setFocus on checkboxgroup via rules", () => {
 
-    const pagePath = "content/forms/af/core-components-it/samples/checkboxgroup/focustest.html"
+    const pagePath = "content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/focustest.html"
     let formContainer = null
 
     beforeEach(() => {
diff --git a/ui.tests/test-module/specs/checkboxgroup/checkboxgroupv2.runtime.cy.js b/ui.tests/test-module/specs/checkboxgroup/checkboxgroupv2.runtime.cy.js
