diff --git a/src/components/checkbox/Checkbox.unit.js b/src/components/checkbox/Checkbox.unit.js
index 88177bba8c..fa2f6a6a83 100644
--- a/src/components/checkbox/Checkbox.unit.js
+++ b/src/components/checkbox/Checkbox.unit.js
@@ -26,15 +26,19 @@ describe('Checkbox Component', () => {
     });
   });
 
-  it('Span should have correct text label', () => {
+  it('Span should have correct text label and attributes', () => {
     return Harness.testCreate(CheckBoxComponent, comp1).then((component) => {
       const checkboxes = component.element.querySelectorAll('input[ref="input"]');
       assert.equal(checkboxes.length, 1);
       const componentClass = checkboxes[0].getAttribute('class');
+      const componentId = checkboxes[0].getAttribute('id');
       assert(componentClass.indexOf('form-check-input') !== -1, 'No form-check-input class.');
+      assert(componentId, 'Should provide "id" attribute for the input');
       const labels = component.element.querySelectorAll('label');
       assert.equal(labels.length, 1);
       assert(labels[0].getAttribute('class').indexOf('form-check-label') !== -1, 'No form-check-label class');
+      assert.equal(labels[0].getAttribute('for'), componentId, 'Should provide a proper "for" attribute for the' +
+        ' label');
       const spans = labels[0].querySelectorAll('span');
       assert.equal(spans.length, 1);
       assert.equal(spans[0].innerHTML, 'Check me');
diff --git a/src/templates/bootstrap/checkbox/form.ejs b/src/templates/bootstrap/checkbox/form.ejs
index eea040239f..9d910d250d 100644
--- a/src/templates/bootstrap/checkbox/form.ejs
+++ b/src/templates/bootstrap/checkbox/form.ejs
@@ -1,12 +1,18 @@
 <div class="form-check checkbox">
-  <label class="{{ctx.input.labelClass}} form-check-label">
+  <label
+    class="{{ctx.input.labelClass}} form-check-label"
+    for="{{ctx.instance.id}}-{{ctx.component.key}}"
+    id="l-{{ctx.instance.id}}-{{ctx.component.key}}"
+  >
     <{{ctx.input.type}}
       ref="input"
       {% for (var attr in ctx.input.attr) { %}
       {{attr}}="{{ctx.input.attr[attr]}}"
       {% } %}
+      id="{{ctx.instance.id}}-{{ctx.component.key}}"
       {% if (ctx.checked) { %}checked=true{% } %}
       aria-required="{{ctx.component.validate.required}}"
+      aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}}"
       {% if (ctx.component.description) { %}
       aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
       {% } %}
diff --git a/test/renders/component-bootstrap-checkbox-multiple.html b/test/renders/component-bootstrap-checkbox-multiple.html
index 7511cf9ac4..439356e044 100644
--- a/test/renders/component-bootstrap-checkbox-multiple.html
+++ b/test/renders/component-bootstrap-checkbox-multiple.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox formio-component-multiple " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-checkbox-readOnly-value0.html b/test/renders/component-bootstrap-checkbox-readOnly-value0.html
index f62b644b7b..c7c18743d9 100644
--- a/test/renders/component-bootstrap-checkbox-readOnly-value0.html
+++ b/test/renders/component-bootstrap-checkbox-readOnly-value0.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-checkbox-readOnly-value1.html b/test/renders/component-bootstrap-checkbox-readOnly-value1.html
index b4d2337f78..473e1f0462 100644
--- a/test/renders/component-bootstrap-checkbox-readOnly-value1.html
+++ b/test/renders/component-bootstrap-checkbox-readOnly-value1.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" checked=true aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" checked=true aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-checkbox-readOnly-value2.html b/test/renders/component-bootstrap-checkbox-readOnly-value2.html
index f62b644b7b..c7c18743d9 100644
--- a/test/renders/component-bootstrap-checkbox-readOnly-value2.html
+++ b/test/renders/component-bootstrap-checkbox-readOnly-value2.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-checkbox-readOnly.html b/test/renders/component-bootstrap-checkbox-readOnly.html
index f62b644b7b..c7c18743d9 100644
--- a/test/renders/component-bootstrap-checkbox-readOnly.html
+++ b/test/renders/component-bootstrap-checkbox-readOnly.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-checkbox-required.html b/test/renders/component-bootstrap-checkbox-required.html
index 3d652e978b..ea4d08d94c 100644
--- a/test/renders/component-bootstrap-checkbox-required.html
+++ b/test/renders/component-bootstrap-checkbox-required.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox  required" ref="component">
   <div class="form-check checkbox">
-    <label class=" field-required form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
+    <label class=" field-required form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="true" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-checkbox.html b/test/renders/component-bootstrap-checkbox.html
index 2ff3a53881..2d8cab7985 100644
--- a/test/renders/component-bootstrap-checkbox.html
+++ b/test/renders/component-bootstrap-checkbox.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-datetime-readOnly-value1.html b/test/renders/component-bootstrap-datetime-readOnly-value1.html
index 70f516c42e..9a6b3ba481 100644
--- a/test/renders/component-bootstrap-datetime-readOnly-value1.html
+++ b/test/renders/component-bootstrap-datetime-readOnly-value1.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="input-group">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 06:00 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 08:00 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
       <span aria-live="assertive" id="dateTime-liveRegion" class="sr-only" ref="liveRegion"></span>
       <div class="input-group-append" ref="suffix">
         <span class="input-group-text">
diff --git a/test/renders/component-bootstrap-datetime-readOnly-value2.html b/test/renders/component-bootstrap-datetime-readOnly-value2.html
index 7e97079e6f..4cc6dfac33 100644
--- a/test/renders/component-bootstrap-datetime-readOnly-value2.html
+++ b/test/renders/component-bootstrap-datetime-readOnly-value2.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="input-group">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 08:11 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 10:11 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
       <span aria-live="assertive" id="dateTime-liveRegion" class="sr-only" ref="liveRegion"></span>
       <div class="input-group-append" ref="suffix">
         <span class="input-group-text">
diff --git a/test/renders/component-bootstrap3-checkbox-multiple.html b/test/renders/component-bootstrap3-checkbox-multiple.html
index 7511cf9ac4..439356e044 100644
--- a/test/renders/component-bootstrap3-checkbox-multiple.html
+++ b/test/renders/component-bootstrap3-checkbox-multiple.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox formio-component-multiple " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-checkbox-readOnly-value0.html b/test/renders/component-bootstrap3-checkbox-readOnly-value0.html
index f62b644b7b..c7c18743d9 100644
--- a/test/renders/component-bootstrap3-checkbox-readOnly-value0.html
+++ b/test/renders/component-bootstrap3-checkbox-readOnly-value0.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-checkbox-readOnly-value1.html b/test/renders/component-bootstrap3-checkbox-readOnly-value1.html
index b4d2337f78..473e1f0462 100644
--- a/test/renders/component-bootstrap3-checkbox-readOnly-value1.html
+++ b/test/renders/component-bootstrap3-checkbox-readOnly-value1.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" checked=true aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" checked=true aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-checkbox-readOnly-value2.html b/test/renders/component-bootstrap3-checkbox-readOnly-value2.html
index f62b644b7b..c7c18743d9 100644
--- a/test/renders/component-bootstrap3-checkbox-readOnly-value2.html
+++ b/test/renders/component-bootstrap3-checkbox-readOnly-value2.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-checkbox-readOnly.html b/test/renders/component-bootstrap3-checkbox-readOnly.html
index f62b644b7b..c7c18743d9 100644
--- a/test/renders/component-bootstrap3-checkbox-readOnly.html
+++ b/test/renders/component-bootstrap3-checkbox-readOnly.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-checkbox-required.html b/test/renders/component-bootstrap3-checkbox-required.html
index 3d652e978b..ea4d08d94c 100644
--- a/test/renders/component-bootstrap3-checkbox-required.html
+++ b/test/renders/component-bootstrap3-checkbox-required.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox  required" ref="component">
   <div class="form-check checkbox">
-    <label class=" field-required form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
+    <label class=" field-required form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="true" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-checkbox.html b/test/renders/component-bootstrap3-checkbox.html
index 2ff3a53881..2d8cab7985 100644
--- a/test/renders/component-bootstrap3-checkbox.html
+++ b/test/renders/component-bootstrap3-checkbox.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-datetime-readOnly-value1.html b/test/renders/component-bootstrap3-datetime-readOnly-value1.html
index 05b0556686..91a510b9de 100644
--- a/test/renders/component-bootstrap3-datetime-readOnly-value1.html
+++ b/test/renders/component-bootstrap3-datetime-readOnly-value1.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="input-group">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 06:00 PM" id="dateTime-dateTime"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 08:00 PM" id="dateTime-dateTime"></input>
       <div class="input-group-addon" ref="suffix">
         <i ref="icon" class="fa fa-calendar" style=""></i>
       </div>
diff --git a/test/renders/component-bootstrap3-datetime-readOnly-value2.html b/test/renders/component-bootstrap3-datetime-readOnly-value2.html
index a0de7fddbc..e5527420d9 100644
--- a/test/renders/component-bootstrap3-datetime-readOnly-value2.html
+++ b/test/renders/component-bootstrap3-datetime-readOnly-value2.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="input-group">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 08:11 PM" id="dateTime-dateTime"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 10:11 PM" id="dateTime-dateTime"></input>
       <div class="input-group-addon" ref="suffix">
         <i ref="icon" class="fa fa-calendar" style=""></i>
       </div>
diff --git a/test/renders/component-bootstrap5-checkbox-multiple.html b/test/renders/component-bootstrap5-checkbox-multiple.html
index 6b9f8b95a4..be35089b22 100644
--- a/test/renders/component-bootstrap5-checkbox-multiple.html
+++ b/test/renders/component-bootstrap5-checkbox-multiple.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox formio-component-multiple " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-checkbox-readOnly-value0.html b/test/renders/component-bootstrap5-checkbox-readOnly-value0.html
index c85e9434c8..dffba97f78 100644
--- a/test/renders/component-bootstrap5-checkbox-readOnly-value0.html
+++ b/test/renders/component-bootstrap5-checkbox-readOnly-value0.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-checkbox-readOnly-value1.html b/test/renders/component-bootstrap5-checkbox-readOnly-value1.html
index 253f10fc3d..b98f374ff1 100644
--- a/test/renders/component-bootstrap5-checkbox-readOnly-value1.html
+++ b/test/renders/component-bootstrap5-checkbox-readOnly-value1.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" checked=true aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" checked=true aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-checkbox-readOnly-value2.html b/test/renders/component-bootstrap5-checkbox-readOnly-value2.html
index c85e9434c8..dffba97f78 100644
--- a/test/renders/component-bootstrap5-checkbox-readOnly-value2.html
+++ b/test/renders/component-bootstrap5-checkbox-readOnly-value2.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-checkbox-readOnly.html b/test/renders/component-bootstrap5-checkbox-readOnly.html
index c85e9434c8..dffba97f78 100644
--- a/test/renders/component-bootstrap5-checkbox-readOnly.html
+++ b/test/renders/component-bootstrap5-checkbox-readOnly.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-checkbox-required.html b/test/renders/component-bootstrap5-checkbox-required.html
index c76cd951cf..66ffcfded5 100644
--- a/test/renders/component-bootstrap5-checkbox-required.html
+++ b/test/renders/component-bootstrap5-checkbox-required.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox  required" ref="component">
   <div class="form-check checkbox">
-    <label class=" field-required form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
+    <label class=" field-required form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="true" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-checkbox.html b/test/renders/component-bootstrap5-checkbox.html
index f14c2a2217..db9e7be013 100644
--- a/test/renders/component-bootstrap5-checkbox.html
+++ b/test/renders/component-bootstrap5-checkbox.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-datetime-readOnly-value1.html b/test/renders/component-bootstrap5-datetime-readOnly-value1.html
index 2c20a6cbdb..3b757ebddc 100644
--- a/test/renders/component-bootstrap5-datetime-readOnly-value1.html
+++ b/test/renders/component-bootstrap5-datetime-readOnly-value1.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="input-group">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 06:00 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 08:00 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
       <span aria-live="assertive" id="dateTime-liveRegion" class="visually-hidden" ref="liveRegion"></span>
       <div class="input-group-text" ref="suffix">
         <i ref="icon" class="fa fa-calendar" style=""></i>
diff --git a/test/renders/component-bootstrap5-datetime-readOnly-value2.html b/test/renders/component-bootstrap5-datetime-readOnly-value2.html
index 894f585047..4073de8358 100644
--- a/test/renders/component-bootstrap5-datetime-readOnly-value2.html
+++ b/test/renders/component-bootstrap5-datetime-readOnly-value2.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="input-group">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 08:11 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 10:11 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
       <span aria-live="assertive" id="dateTime-liveRegion" class="visually-hidden" ref="liveRegion"></span>
       <div class="input-group-text" ref="suffix">
         <i ref="icon" class="fa fa-calendar" style=""></i>
diff --git a/test/renders/component-semantic-datetime-readOnly-value1.html b/test/renders/component-semantic-datetime-readOnly-value1.html
index acd56557ae..178ea1fd96 100644
--- a/test/renders/component-semantic-datetime-readOnly-value1.html
+++ b/test/renders/component-semantic-datetime-readOnly-value1.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="ui input fluid  right labeled">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 09:00 PM" id="dateTime-dateTime"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 08:00 PM" id="dateTime-dateTime"></input>
       <div class="ui label" ref="suffix">
         <i ref="icon" class="fa fa-calendar" style=""></i>
       </div>
diff --git a/test/renders/component-semantic-datetime-readOnly-value2.html b/test/renders/component-semantic-datetime-readOnly-value2.html
index 4fc7bc1a51..251261302b 100644
--- a/test/renders/component-semantic-datetime-readOnly-value2.html
+++ b/test/renders/component-semantic-datetime-readOnly-value2.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="ui input fluid  right labeled">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 11:11 PM" id="dateTime-dateTime"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 10:11 PM" id="dateTime-dateTime"></input>
       <div class="ui label" ref="suffix">
         <i ref="icon" class="fa fa-calendar" style=""></i>
       </div>
diff --git a/test/renders/form-bootstrap-basic.html b/test/renders/form-bootstrap-basic.html
index bb1445e0d7..5fd1f667a5 100644
--- a/test/renders/form-bootstrap-basic.html
+++ b/test/renders/form-bootstrap-basic.html
@@ -103,8 +103,8 @@
     </div>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-calculateValueWithManualOverride.html b/test/renders/form-bootstrap-calculateValueWithManualOverride.html
index b060064095..9d6a67342f 100644
--- a/test/renders/form-bootstrap-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap-calculateValueWithManualOverride.html
@@ -19,8 +19,8 @@
         <div role="tabpanel" class="card-body tab-pane active" style="display: block" ref="tab-tabs">
           <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+              <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                 <span>hide</span>
                 </input>
               </label>
diff --git a/test/renders/form-bootstrap-data.html b/test/renders/form-bootstrap-data.html
index 648e569bbf..3737aeb8be 100644
--- a/test/renders/form-bootstrap-data.html
+++ b/test/renders/form-bootstrap-data.html
@@ -220,8 +220,8 @@
     </div>
     <div id="show" class="form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="show-show" id="l-show-show">
+          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" id="show-show" aria-required="false" aria-labelledby="l-show-show">
           <span>Show</span>
           </input>
         </label>
@@ -249,8 +249,8 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <label class=" form-check-label">
-                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                  <label class=" form-check-label" for="conditionalDataGridShow2-conditionalDataGridShow2" id="l-conditionalDataGridShow2-conditionalDataGridShow2">
+                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-required="false" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2">
                     </input>
                   </label>
                 </div>
diff --git a/test/renders/form-bootstrap-defaults.html b/test/renders/form-bootstrap-defaults.html
index 8925e60a42..5cfd248a58 100644
--- a/test/renders/form-bootstrap-defaults.html
+++ b/test/renders/form-bootstrap-defaults.html
@@ -39,8 +39,8 @@
     </div>
     <div id="checkboxFalse" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkboxFalse-checkboxFalse" id="l-checkboxFalse-checkboxFalse">
+          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxFalse-checkboxFalse" aria-required="false" aria-labelledby="l-checkboxFalse-checkboxFalse">
           <span>Checkbox False</span>
           </input>
         </label>
@@ -49,8 +49,8 @@
     </div>
     <div id="checkboxTrue" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" checked=true aria-required="false">
+        <label class=" form-check-label" for="checkboxTrue-checkboxTrue" id="l-checkboxTrue-checkboxTrue">
+          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxTrue-checkboxTrue" checked=true aria-required="false" aria-labelledby="l-checkboxTrue-checkboxTrue">
           <span>Checkbox True</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap-formComponentWithConditionalRenderingForm.html
index 31652ed940..9f47f1776b 100644
--- a/test/renders/form-bootstrap-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-formWithAdvancedLogic.html b/test/renders/form-bootstrap-formWithAdvancedLogic.html
index 476a339e5b..fbb2b2f0bb 100644
--- a/test/renders/form-bootstrap-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap-formWithAdvancedLogic.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" id="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
+          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" value="0" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-required="false" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-modalEditComponents.html b/test/renders/form-bootstrap-modalEditComponents.html
index 45f18570a4..b5ad3d1c9e 100644
--- a/test/renders/form-bootstrap-modalEditComponents.html
+++ b/test/renders/form-bootstrap-modalEditComponents.html
@@ -10,8 +10,8 @@
           <div ref="modalContents">
             <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>Checkbox</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap-premium.html b/test/renders/form-bootstrap-premium.html
index cdf93a0f00..99ecfd5070 100644
--- a/test/renders/form-bootstrap-premium.html
+++ b/test/renders/form-bootstrap-premium.html
@@ -69,8 +69,8 @@
           </div>
           <div id="valid" class="form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+              <label class=" form-check-label" for="valid-valid" id="l-valid-valid">
+                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" id="valid-valid" aria-required="false" aria-labelledby="l-valid-valid">
                 </input>
               </label>
             </div>
diff --git a/test/renders/form-bootstrap-readOnly-basic.html b/test/renders/form-bootstrap-readOnly-basic.html
index 89666f64d3..dd1affc600 100644
--- a/test/renders/form-bootstrap-readOnly-basic.html
+++ b/test/renders/form-bootstrap-readOnly-basic.html
@@ -87,8 +87,8 @@
     </div>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html b/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html
index 045cb26667..519de5c4ed 100644
--- a/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html
@@ -19,8 +19,8 @@
         <div role="tabpanel" class="card-body tab-pane active" style="display: block" ref="tab-tabs">
           <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+              <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                 <span>hide</span>
                 </input>
               </label>
diff --git a/test/renders/form-bootstrap-readOnly-data.html b/test/renders/form-bootstrap-readOnly-data.html
index 4d89c95516..a4560f8ea1 100644
--- a/test/renders/form-bootstrap-readOnly-data.html
+++ b/test/renders/form-bootstrap-readOnly-data.html
@@ -197,8 +197,8 @@
     </div>
     <div id="show" class="form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="show-show" id="l-show-show">
+          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="show-show" aria-required="false" aria-labelledby="l-show-show">
           <span>Show</span>
           </input>
         </label>
@@ -223,8 +223,8 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <label class=" form-check-label">
-                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                  <label class=" form-check-label" for="conditionalDataGridShow2-conditionalDataGridShow2" id="l-conditionalDataGridShow2-conditionalDataGridShow2">
+                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-required="false" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2">
                     </input>
                   </label>
                 </div>
diff --git a/test/renders/form-bootstrap-readOnly-defaults.html b/test/renders/form-bootstrap-readOnly-defaults.html
index 336b5d107a..a91e0503dd 100644
--- a/test/renders/form-bootstrap-readOnly-defaults.html
+++ b/test/renders/form-bootstrap-readOnly-defaults.html
@@ -43,8 +43,8 @@
     </div>
     <div id="checkboxFalse" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkboxFalse-checkboxFalse" id="l-checkboxFalse-checkboxFalse">
+          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxFalse-checkboxFalse" aria-required="false" aria-labelledby="l-checkboxFalse-checkboxFalse">
           <span>Checkbox False</span>
           </input>
         </label>
@@ -53,8 +53,8 @@
     </div>
     <div id="checkboxTrue" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" checked=true aria-required="false">
+        <label class=" form-check-label" for="checkboxTrue-checkboxTrue" id="l-checkboxTrue-checkboxTrue">
+          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxTrue-checkboxTrue" checked=true aria-required="false" aria-labelledby="l-checkboxTrue-checkboxTrue">
           <span>Checkbox True</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-readOnly-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap-readOnly-formComponentWithConditionalRenderingForm.html
index 98b4241d85..e931790530 100644
--- a/test/renders/form-bootstrap-readOnly-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap-readOnly-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-readOnly-formWithAdvancedLogic.html b/test/renders/form-bootstrap-readOnly-formWithAdvancedLogic.html
index 78c0a8e3e4..1ef6a9c69b 100644
--- a/test/renders/form-bootstrap-readOnly-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap-readOnly-formWithAdvancedLogic.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" id="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
+          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-required="false" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-readOnly-modalEditComponents.html b/test/renders/form-bootstrap-readOnly-modalEditComponents.html
index ae64693cfe..3f70155af6 100644
--- a/test/renders/form-bootstrap-readOnly-modalEditComponents.html
+++ b/test/renders/form-bootstrap-readOnly-modalEditComponents.html
@@ -10,8 +10,8 @@
           <div ref="modalContents">
             <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>Checkbox</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap-readOnly-premium.html b/test/renders/form-bootstrap-readOnly-premium.html
index 757964a625..e60ffa5bf5 100644
--- a/test/renders/form-bootstrap-readOnly-premium.html
+++ b/test/renders/form-bootstrap-readOnly-premium.html
@@ -42,8 +42,8 @@
           </div>
           <div id="valid" class="form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+              <label class=" form-check-label" for="valid-valid" id="l-valid-valid">
+                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="valid-valid" aria-required="false" aria-labelledby="l-valid-valid">
                 </input>
               </label>
             </div>
diff --git a/test/renders/form-bootstrap-readOnly-settingErrors.html b/test/renders/form-bootstrap-readOnly-settingErrors.html
index 407f1d95f1..cc4e2f4329 100644
--- a/test/renders/form-bootstrap-readOnly-settingErrors.html
+++ b/test/renders/form-bootstrap-readOnly-settingErrors.html
@@ -63,8 +63,8 @@
   " ref="column-columns">
                     <div id="checkboxColumn" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <label class=" field-required form-check-label">
-                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="true">
+                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
+                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxColumn-checkboxColumn" aria-required="true" aria-labelledby="l-checkboxColumn-checkboxColumn">
                           <span>Checkbox - Column</span>
                           </input>
                         </label>
diff --git a/test/renders/form-bootstrap-readOnly-tooltipActivateCheckbox.html b/test/renders/form-bootstrap-readOnly-tooltipActivateCheckbox.html
index d60faa7f0e..fcd6d12a94 100644
--- a/test/renders/form-bootstrap-readOnly-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap-readOnly-tooltipActivateCheckbox.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-readOnly-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap-readOnly-wizardWithSimpleConditionalPage.html
index 1e91afe169..ec84e30d2a 100644
--- a/test/renders/form-bootstrap-readOnly-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap-readOnly-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,8 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <label class=" form-check-label">
-            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+          <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
             <span>Checkbox</span>
             </input>
           </label>
diff --git a/test/renders/form-bootstrap-settingErrors.html b/test/renders/form-bootstrap-settingErrors.html
index b691cba8fa..82439f22a1 100644
--- a/test/renders/form-bootstrap-settingErrors.html
+++ b/test/renders/form-bootstrap-settingErrors.html
@@ -63,8 +63,8 @@
   " ref="column-columns">
                     <div id="checkboxColumn" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <label class=" field-required form-check-label">
-                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
+                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
+                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxColumn-checkboxColumn" aria-required="true" aria-labelledby="l-checkboxColumn-checkboxColumn">
                           <span>Checkbox - Column</span>
                           </input>
                         </label>
diff --git a/test/renders/form-bootstrap-tooltipActivateCheckbox.html b/test/renders/form-bootstrap-tooltipActivateCheckbox.html
index fee87e7ad7..f440c6536c 100644
--- a/test/renders/form-bootstrap-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap-tooltipActivateCheckbox.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap-wizardWithSimpleConditionalPage.html
index 3bbe9b16d8..8117524c9f 100644
--- a/test/renders/form-bootstrap-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,8 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <label class=" form-check-label">
-            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+          <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
             <span>Checkbox</span>
             </input>
           </label>
diff --git a/test/renders/form-bootstrap3-basic.html b/test/renders/form-bootstrap3-basic.html
index fa10327f60..2f27b88d9e 100644
--- a/test/renders/form-bootstrap3-basic.html
+++ b/test/renders/form-bootstrap3-basic.html
@@ -98,8 +98,8 @@
     </div>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-calculateValueWithManualOverride.html b/test/renders/form-bootstrap3-calculateValueWithManualOverride.html
index 542f397d05..831283d8d2 100644
--- a/test/renders/form-bootstrap3-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap3-calculateValueWithManualOverride.html
@@ -14,8 +14,8 @@
           <div role="tabpanel" class="tab-pane active" ref="tab-tabs">
             <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>hide</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap3-data.html b/test/renders/form-bootstrap3-data.html
index d82fb3f351..210124d995 100644
--- a/test/renders/form-bootstrap3-data.html
+++ b/test/renders/form-bootstrap3-data.html
@@ -220,8 +220,8 @@
     </div>
     <div id="show" class="form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="show-show" id="l-show-show">
+          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" id="show-show" aria-required="false" aria-labelledby="l-show-show">
           <span>Show</span>
           </input>
         </label>
@@ -248,8 +248,8 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <label class=" form-check-label">
-                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                  <label class=" form-check-label" for="conditionalDataGridShow2-conditionalDataGridShow2" id="l-conditionalDataGridShow2-conditionalDataGridShow2">
+                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-required="false" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2">
                     </input>
                   </label>
                 </div>
diff --git a/test/renders/form-bootstrap3-defaults.html b/test/renders/form-bootstrap3-defaults.html
index 0774ba39a5..f9b2826b55 100644
--- a/test/renders/form-bootstrap3-defaults.html
+++ b/test/renders/form-bootstrap3-defaults.html
@@ -38,8 +38,8 @@
     </div>
     <div id="checkboxFalse" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkboxFalse-checkboxFalse" id="l-checkboxFalse-checkboxFalse">
+          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxFalse-checkboxFalse" aria-required="false" aria-labelledby="l-checkboxFalse-checkboxFalse">
           <span>Checkbox False</span>
           </input>
         </label>
@@ -48,8 +48,8 @@
     </div>
     <div id="checkboxTrue" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" checked=true aria-required="false">
+        <label class=" form-check-label" for="checkboxTrue-checkboxTrue" id="l-checkboxTrue-checkboxTrue">
+          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxTrue-checkboxTrue" checked=true aria-required="false" aria-labelledby="l-checkboxTrue-checkboxTrue">
           <span>Checkbox True</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap3-formComponentWithConditionalRenderingForm.html
index 31652ed940..9f47f1776b 100644
--- a/test/renders/form-bootstrap3-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap3-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-formWithAdvancedLogic.html b/test/renders/form-bootstrap3-formWithAdvancedLogic.html
index c3197fb7ef..4958c7a2e7 100644
--- a/test/renders/form-bootstrap3-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap3-formWithAdvancedLogic.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" id="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
+          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" value="0" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-required="false" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-modalEditComponents.html b/test/renders/form-bootstrap3-modalEditComponents.html
index 89e5087fed..7e348d591d 100644
--- a/test/renders/form-bootstrap3-modalEditComponents.html
+++ b/test/renders/form-bootstrap3-modalEditComponents.html
@@ -10,8 +10,8 @@
           <div ref="modalContents">
             <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>Checkbox</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap3-premium.html b/test/renders/form-bootstrap3-premium.html
index 9abf063390..5121743fb7 100644
--- a/test/renders/form-bootstrap3-premium.html
+++ b/test/renders/form-bootstrap3-premium.html
@@ -51,8 +51,8 @@
           </div>
           <div id="valid" class="form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+              <label class=" form-check-label" for="valid-valid" id="l-valid-valid">
+                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" id="valid-valid" aria-required="false" aria-labelledby="l-valid-valid">
                 </input>
               </label>
             </div>
diff --git a/test/renders/form-bootstrap3-readOnly-basic.html b/test/renders/form-bootstrap3-readOnly-basic.html
index d8b8f65e95..bcb833906d 100644
--- a/test/renders/form-bootstrap3-readOnly-basic.html
+++ b/test/renders/form-bootstrap3-readOnly-basic.html
@@ -82,8 +82,8 @@
     </div>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-readOnly-calculateValueWithManualOverride.html b/test/renders/form-bootstrap3-readOnly-calculateValueWithManualOverride.html
index 4853edf3d7..a2d1836664 100644
--- a/test/renders/form-bootstrap3-readOnly-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap3-readOnly-calculateValueWithManualOverride.html
@@ -14,8 +14,8 @@
           <div role="tabpanel" class="tab-pane active" ref="tab-tabs">
             <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>hide</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap3-readOnly-data.html b/test/renders/form-bootstrap3-readOnly-data.html
index a39cc04a72..2dfc8ec5c7 100644
--- a/test/renders/form-bootstrap3-readOnly-data.html
+++ b/test/renders/form-bootstrap3-readOnly-data.html
@@ -197,8 +197,8 @@
     </div>
     <div id="show" class="form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="show-show" id="l-show-show">
+          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="show-show" aria-required="false" aria-labelledby="l-show-show">
           <span>Show</span>
           </input>
         </label>
@@ -223,8 +223,8 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <label class=" form-check-label">
-                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                  <label class=" form-check-label" for="conditionalDataGridShow2-conditionalDataGridShow2" id="l-conditionalDataGridShow2-conditionalDataGridShow2">
+                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-required="false" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2">
                     </input>
                   </label>
                 </div>
diff --git a/test/renders/form-bootstrap3-readOnly-defaults.html b/test/renders/form-bootstrap3-readOnly-defaults.html
index 93aae42111..2c77e562af 100644
--- a/test/renders/form-bootstrap3-readOnly-defaults.html
+++ b/test/renders/form-bootstrap3-readOnly-defaults.html
@@ -42,8 +42,8 @@
     </div>
     <div id="checkboxFalse" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkboxFalse-checkboxFalse" id="l-checkboxFalse-checkboxFalse">
+          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxFalse-checkboxFalse" aria-required="false" aria-labelledby="l-checkboxFalse-checkboxFalse">
           <span>Checkbox False</span>
           </input>
         </label>
@@ -52,8 +52,8 @@
     </div>
     <div id="checkboxTrue" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" checked=true aria-required="false">
+        <label class=" form-check-label" for="checkboxTrue-checkboxTrue" id="l-checkboxTrue-checkboxTrue">
+          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxTrue-checkboxTrue" checked=true aria-required="false" aria-labelledby="l-checkboxTrue-checkboxTrue">
           <span>Checkbox True</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-readOnly-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap3-readOnly-formComponentWithConditionalRenderingForm.html
index 98b4241d85..e931790530 100644
--- a/test/renders/form-bootstrap3-readOnly-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap3-readOnly-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-readOnly-formWithAdvancedLogic.html b/test/renders/form-bootstrap3-readOnly-formWithAdvancedLogic.html
index 3c79fd93f6..d2efe6e10a 100644
--- a/test/renders/form-bootstrap3-readOnly-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap3-readOnly-formWithAdvancedLogic.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" id="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
+          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-required="false" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-readOnly-modalEditComponents.html b/test/renders/form-bootstrap3-readOnly-modalEditComponents.html
index e76c66bc1b..9fce3da361 100644
--- a/test/renders/form-bootstrap3-readOnly-modalEditComponents.html
+++ b/test/renders/form-bootstrap3-readOnly-modalEditComponents.html
@@ -10,8 +10,8 @@
           <div ref="modalContents">
             <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>Checkbox</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap3-readOnly-premium.html b/test/renders/form-bootstrap3-readOnly-premium.html
index 0b93190ad2..c6b39189d3 100644
--- a/test/renders/form-bootstrap3-readOnly-premium.html
+++ b/test/renders/form-bootstrap3-readOnly-premium.html
@@ -42,8 +42,8 @@
           </div>
           <div id="valid" class="form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+              <label class=" form-check-label" for="valid-valid" id="l-valid-valid">
+                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="valid-valid" aria-required="false" aria-labelledby="l-valid-valid">
                 </input>
               </label>
             </div>
diff --git a/test/renders/form-bootstrap3-readOnly-settingErrors.html b/test/renders/form-bootstrap3-readOnly-settingErrors.html
index 358507eab9..64a7fcf210 100644
--- a/test/renders/form-bootstrap3-readOnly-settingErrors.html
+++ b/test/renders/form-bootstrap3-readOnly-settingErrors.html
@@ -62,8 +62,8 @@ <h4 class="mb-0 panel-title">
   " ref="column-columns">
                     <div id="checkboxColumn" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <label class=" field-required form-check-label">
-                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="true">
+                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
+                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxColumn-checkboxColumn" aria-required="true" aria-labelledby="l-checkboxColumn-checkboxColumn">
                           <span>Checkbox - Column</span>
                           </input>
                         </label>
diff --git a/test/renders/form-bootstrap3-readOnly-tooltipActivateCheckbox.html b/test/renders/form-bootstrap3-readOnly-tooltipActivateCheckbox.html
index d60faa7f0e..fcd6d12a94 100644
--- a/test/renders/form-bootstrap3-readOnly-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap3-readOnly-tooltipActivateCheckbox.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-readOnly-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap3-readOnly-wizardWithSimpleConditionalPage.html
index 56d2606d7d..df935c8295 100644
--- a/test/renders/form-bootstrap3-readOnly-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap3-readOnly-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,8 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <label class=" form-check-label">
-            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+          <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
             <span>Checkbox</span>
             </input>
           </label>
diff --git a/test/renders/form-bootstrap3-settingErrors.html b/test/renders/form-bootstrap3-settingErrors.html
index d73a81a7f4..a82f661549 100644
--- a/test/renders/form-bootstrap3-settingErrors.html
+++ b/test/renders/form-bootstrap3-settingErrors.html
@@ -62,8 +62,8 @@ <h4 class="mb-0 panel-title">
   " ref="column-columns">
                     <div id="checkboxColumn" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <label class=" field-required form-check-label">
-                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
+                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
+                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxColumn-checkboxColumn" aria-required="true" aria-labelledby="l-checkboxColumn-checkboxColumn">
                           <span>Checkbox - Column</span>
                           </input>
                         </label>
diff --git a/test/renders/form-bootstrap3-tooltipActivateCheckbox.html b/test/renders/form-bootstrap3-tooltipActivateCheckbox.html
index fee87e7ad7..f440c6536c 100644
--- a/test/renders/form-bootstrap3-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap3-tooltipActivateCheckbox.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap3-wizardWithSimpleConditionalPage.html
index 08d4171508..8156d3a9c9 100644
--- a/test/renders/form-bootstrap3-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap3-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,8 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <label class=" form-check-label">
-            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+          <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
             <span>Checkbox</span>
             </input>
           </label>
diff --git a/test/renders/form-bootstrap5-basic.html b/test/renders/form-bootstrap5-basic.html
index 39b40d404b..0542c2fae5 100644
--- a/test/renders/form-bootstrap5-basic.html
+++ b/test/renders/form-bootstrap5-basic.html
@@ -99,8 +99,8 @@
     </div>
     <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-calculateValueWithManualOverride.html b/test/renders/form-bootstrap5-calculateValueWithManualOverride.html
index 1f92d7ba39..e9759db2d6 100644
--- a/test/renders/form-bootstrap5-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap5-calculateValueWithManualOverride.html
@@ -19,8 +19,8 @@
         <div role="tabpanel" class="card-body tab-pane active" style="display: block" ref="tab-tabs">
           <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+              <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                 <span>hide</span>
                 </input>
               </label>
diff --git a/test/renders/form-bootstrap5-data.html b/test/renders/form-bootstrap5-data.html
index 9df5859f80..794f3f112a 100644
--- a/test/renders/form-bootstrap5-data.html
+++ b/test/renders/form-bootstrap5-data.html
@@ -220,8 +220,8 @@
     </div>
     <div id="show" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="show-show" id="l-show-show">
+          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" id="show-show" aria-required="false" aria-labelledby="l-show-show">
           <span>Show</span>
           </input>
         </label>
@@ -249,8 +249,8 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <label class=" form-check-label">
-                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                  <label class=" form-check-label" for="conditionalDataGridShow2-conditionalDataGridShow2" id="l-conditionalDataGridShow2-conditionalDataGridShow2">
+                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-required="false" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2">
                     </input>
                   </label>
                 </div>
diff --git a/test/renders/form-bootstrap5-defaults.html b/test/renders/form-bootstrap5-defaults.html
index 8636df2b25..d26e9a1784 100644
--- a/test/renders/form-bootstrap5-defaults.html
+++ b/test/renders/form-bootstrap5-defaults.html
@@ -39,8 +39,8 @@
     </div>
     <div id="checkboxFalse" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkboxFalse-checkboxFalse" id="l-checkboxFalse-checkboxFalse">
+          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxFalse-checkboxFalse" aria-required="false" aria-labelledby="l-checkboxFalse-checkboxFalse">
           <span>Checkbox False</span>
           </input>
         </label>
@@ -49,8 +49,8 @@
     </div>
     <div id="checkboxTrue" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" checked=true aria-required="false">
+        <label class=" form-check-label" for="checkboxTrue-checkboxTrue" id="l-checkboxTrue-checkboxTrue">
+          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxTrue-checkboxTrue" checked=true aria-required="false" aria-labelledby="l-checkboxTrue-checkboxTrue">
           <span>Checkbox True</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap5-formComponentWithConditionalRenderingForm.html
index b27a098cdf..0fe91b1a34 100644
--- a/test/renders/form-bootstrap5-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap5-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-formWithAdvancedLogic.html b/test/renders/form-bootstrap5-formWithAdvancedLogic.html
index 7a9c7db0c5..1c62c7e2b3 100644
--- a/test/renders/form-bootstrap5-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap5-formWithAdvancedLogic.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" id="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
+          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" value="0" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-required="false" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-modalEditComponents.html b/test/renders/form-bootstrap5-modalEditComponents.html
index 59837b1993..911bfb2c18 100644
--- a/test/renders/form-bootstrap5-modalEditComponents.html
+++ b/test/renders/form-bootstrap5-modalEditComponents.html
@@ -10,8 +10,8 @@
           <div ref="modalContents">
             <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>Checkbox</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap5-premium.html b/test/renders/form-bootstrap5-premium.html
index 8d15b32ec7..9db47cfe2a 100644
--- a/test/renders/form-bootstrap5-premium.html
+++ b/test/renders/form-bootstrap5-premium.html
@@ -69,8 +69,8 @@
           </div>
           <div id="valid" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+              <label class=" form-check-label" for="valid-valid" id="l-valid-valid">
+                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" id="valid-valid" aria-required="false" aria-labelledby="l-valid-valid">
                 </input>
               </label>
             </div>
diff --git a/test/renders/form-bootstrap5-readOnly-basic.html b/test/renders/form-bootstrap5-readOnly-basic.html
index 1354497ce9..e6b088d0b6 100644
--- a/test/renders/form-bootstrap5-readOnly-basic.html
+++ b/test/renders/form-bootstrap5-readOnly-basic.html
@@ -83,8 +83,8 @@
     </div>
     <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-readOnly-calculateValueWithManualOverride.html b/test/renders/form-bootstrap5-readOnly-calculateValueWithManualOverride.html
index b68530efd8..231031ee50 100644
--- a/test/renders/form-bootstrap5-readOnly-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap5-readOnly-calculateValueWithManualOverride.html
@@ -19,8 +19,8 @@
         <div role="tabpanel" class="card-body tab-pane active" style="display: block" ref="tab-tabs">
           <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+              <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                 <span>hide</span>
                 </input>
               </label>
diff --git a/test/renders/form-bootstrap5-readOnly-data.html b/test/renders/form-bootstrap5-readOnly-data.html
index c3bd06e217..68dfbaa59f 100644
--- a/test/renders/form-bootstrap5-readOnly-data.html
+++ b/test/renders/form-bootstrap5-readOnly-data.html
@@ -197,8 +197,8 @@
     </div>
     <div id="show" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="show-show" id="l-show-show">
+          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="show-show" aria-required="false" aria-labelledby="l-show-show">
           <span>Show</span>
           </input>
         </label>
@@ -223,8 +223,8 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <label class=" form-check-label">
-                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                  <label class=" form-check-label" for="conditionalDataGridShow2-conditionalDataGridShow2" id="l-conditionalDataGridShow2-conditionalDataGridShow2">
+                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-required="false" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2">
                     </input>
                   </label>
                 </div>
diff --git a/test/renders/form-bootstrap5-readOnly-defaults.html b/test/renders/form-bootstrap5-readOnly-defaults.html
index 13645b4240..51cbf47087 100644
--- a/test/renders/form-bootstrap5-readOnly-defaults.html
+++ b/test/renders/form-bootstrap5-readOnly-defaults.html
@@ -43,8 +43,8 @@
     </div>
     <div id="checkboxFalse" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkboxFalse-checkboxFalse" id="l-checkboxFalse-checkboxFalse">
+          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxFalse-checkboxFalse" aria-required="false" aria-labelledby="l-checkboxFalse-checkboxFalse">
           <span>Checkbox False</span>
           </input>
         </label>
@@ -53,8 +53,8 @@
     </div>
     <div id="checkboxTrue" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" checked=true aria-required="false">
+        <label class=" form-check-label" for="checkboxTrue-checkboxTrue" id="l-checkboxTrue-checkboxTrue">
+          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxTrue-checkboxTrue" checked=true aria-required="false" aria-labelledby="l-checkboxTrue-checkboxTrue">
           <span>Checkbox True</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-readOnly-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap5-readOnly-formComponentWithConditionalRenderingForm.html
index b591e20be4..82721fadda 100644
--- a/test/renders/form-bootstrap5-readOnly-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap5-readOnly-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-readOnly-formWithAdvancedLogic.html b/test/renders/form-bootstrap5-readOnly-formWithAdvancedLogic.html
index bf89da053e..10b804f474 100644
--- a/test/renders/form-bootstrap5-readOnly-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap5-readOnly-formWithAdvancedLogic.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" id="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
+          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-required="false" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-readOnly-modalEditComponents.html b/test/renders/form-bootstrap5-readOnly-modalEditComponents.html
index 636fc05401..1ff2fd2ef4 100644
--- a/test/renders/form-bootstrap5-readOnly-modalEditComponents.html
+++ b/test/renders/form-bootstrap5-readOnly-modalEditComponents.html
@@ -10,8 +10,8 @@
           <div ref="modalContents">
             <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>Checkbox</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap5-readOnly-premium.html b/test/renders/form-bootstrap5-readOnly-premium.html
index c855a1f057..d86d5c3fb5 100644
--- a/test/renders/form-bootstrap5-readOnly-premium.html
+++ b/test/renders/form-bootstrap5-readOnly-premium.html
@@ -42,8 +42,8 @@
           </div>
           <div id="valid" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+              <label class=" form-check-label" for="valid-valid" id="l-valid-valid">
+                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="valid-valid" aria-required="false" aria-labelledby="l-valid-valid">
                 </input>
               </label>
             </div>
diff --git a/test/renders/form-bootstrap5-readOnly-settingErrors.html b/test/renders/form-bootstrap5-readOnly-settingErrors.html
index 2585049430..de5d2707b6 100644
--- a/test/renders/form-bootstrap5-readOnly-settingErrors.html
+++ b/test/renders/form-bootstrap5-readOnly-settingErrors.html
@@ -63,8 +63,8 @@
   " ref="column-columns">
                     <div id="checkboxColumn" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <label class=" field-required form-check-label">
-                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="true">
+                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
+                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxColumn-checkboxColumn" aria-required="true" aria-labelledby="l-checkboxColumn-checkboxColumn">
                           <span>Checkbox - Column</span>
                           </input>
                         </label>
diff --git a/test/renders/form-bootstrap5-readOnly-tooltipActivateCheckbox.html b/test/renders/form-bootstrap5-readOnly-tooltipActivateCheckbox.html
index 1fddf325fb..a5da32dedf 100644
--- a/test/renders/form-bootstrap5-readOnly-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap5-readOnly-tooltipActivateCheckbox.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-readOnly-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap5-readOnly-wizardWithSimpleConditionalPage.html
index 5d3ccefb23..f1b4d798b3 100644
--- a/test/renders/form-bootstrap5-readOnly-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap5-readOnly-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,8 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <label class=" form-check-label">
-            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+          <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
             <span>Checkbox</span>
             </input>
           </label>
diff --git a/test/renders/form-bootstrap5-settingErrors.html b/test/renders/form-bootstrap5-settingErrors.html
index 037e36af43..a79225a49f 100644
--- a/test/renders/form-bootstrap5-settingErrors.html
+++ b/test/renders/form-bootstrap5-settingErrors.html
@@ -63,8 +63,8 @@
   " ref="column-columns">
                     <div id="checkboxColumn" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <label class=" field-required form-check-label">
-                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
+                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
+                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxColumn-checkboxColumn" aria-required="true" aria-labelledby="l-checkboxColumn-checkboxColumn">
                           <span>Checkbox - Column</span>
                           </input>
                         </label>
diff --git a/test/renders/form-bootstrap5-tooltipActivateCheckbox.html b/test/renders/form-bootstrap5-tooltipActivateCheckbox.html
index 57a0883feb..d16f048a6b 100644
--- a/test/renders/form-bootstrap5-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap5-tooltipActivateCheckbox.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap5-wizardWithSimpleConditionalPage.html
index 4f5f34afb4..59cfa0aa98 100644
--- a/test/renders/form-bootstrap5-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap5-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,8 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <label class=" form-check-label">
-            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+          <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
             <span>Checkbox</span>
             </input>
           </label>