From d5654b89791e23e5a55f6c39d6bd1153be0765d4 Mon Sep 17 00:00:00 2001
From: Travis Tidwell <travis@form.io>
Date: Tue, 23 Apr 2024 13:41:52 -0500
Subject: [PATCH] Updated build.

---
 package.json                                         |  2 +-
 .../component-bootstrap-checkbox-multiple.html       |  6 ++++--
 ...component-bootstrap-checkbox-readOnly-value0.html |  6 ++++--
 ...component-bootstrap-checkbox-readOnly-value1.html |  6 ++++--
 ...component-bootstrap-checkbox-readOnly-value2.html |  6 ++++--
 .../component-bootstrap-checkbox-readOnly.html       |  6 ++++--
 .../component-bootstrap-checkbox-required.html       |  6 ++++--
 test/renders/component-bootstrap-checkbox.html       |  6 ++++--
 .../component-bootstrap-radio-readOnly-value0.html   |  4 ++--
 .../component-bootstrap-radio-readOnly-value1.html   |  4 ++--
 .../component-bootstrap-radio-readOnly-value2.html   |  4 ++--
 .../component-bootstrap-radio-readOnly-value3.html   |  4 ++--
 ...ponent-bootstrap-selectboxes-readOnly-value0.html |  4 ++--
 ...ponent-bootstrap-selectboxes-readOnly-value1.html |  4 ++--
 ...ponent-bootstrap-selectboxes-readOnly-value2.html |  4 ++--
 ...ponent-bootstrap-selectboxes-readOnly-value3.html |  4 ++--
 ...ponent-bootstrap-selectboxes-readOnly-value4.html |  4 ++--
 test/renders/form-bootstrap-basic.html               |  6 ++++--
 ...m-bootstrap-calculateValueWithManualOverride.html |  6 ++++--
 test/renders/form-bootstrap-data.html                |  8 +++++---
 test/renders/form-bootstrap-defaults.html            | 12 ++++++++----
 ...ap-formComponentWithConditionalRenderingForm.html |  6 ++++--
 .../form-bootstrap-formWithAdvancedLogic.html        |  6 ++++--
 test/renders/form-bootstrap-modalEditComponents.html |  6 ++++--
 test/renders/form-bootstrap-premium.html             |  2 +-
 test/renders/form-bootstrap-readOnly-basic.html      |  6 ++++--
 ...ap-readOnly-calculateValueWithManualOverride.html |  6 ++++--
 test/renders/form-bootstrap-readOnly-data.html       |  8 +++++---
 test/renders/form-bootstrap-readOnly-defaults.html   | 12 ++++++++----
 ...ly-formComponentWithConditionalRenderingForm.html |  6 ++++--
 ...orm-bootstrap-readOnly-formWithAdvancedLogic.html |  6 ++++--
 .../form-bootstrap-readOnly-modalEditComponents.html |  6 ++++--
 test/renders/form-bootstrap-readOnly-premium.html    |  2 +-
 .../form-bootstrap-readOnly-settingErrors.html       |  6 ++++--
 ...m-bootstrap-readOnly-tooltipActivateCheckbox.html |  6 ++++--
 ...rap-readOnly-wizardWithSimpleConditionalPage.html |  6 ++++--
 test/renders/form-bootstrap-settingErrors.html       |  6 ++++--
 .../form-bootstrap-tooltipActivateCheckbox.html      |  6 ++++--
 ...rm-bootstrap-wizardWithSimpleConditionalPage.html |  6 ++++--
 yarn.lock                                            |  8 ++++----
 40 files changed, 143 insertions(+), 85 deletions(-)

diff --git a/package.json b/package.json
index 579770c441..c87635ae45 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "^3.0.0-rc.23",
+    "@formio/bootstrap": "^3.0.0-rc.24",
     "@formio/choices.js": "^10.2.1",
     "@formio/core": "^2.1.0-dev.tt.3",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
diff --git a/test/renders/component-bootstrap-checkbox-multiple.html b/test/renders/component-bootstrap-checkbox-multiple.html
index 47f0595517..f2c06845ce 100644
--- a/test/renders/component-bootstrap-checkbox-multiple.html
+++ b/test/renders/component-bootstrap-checkbox-multiple.html
@@ -1,7 +1,9 @@
 <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox formio-component-multiple " ref="component">
   <div class="form-check checkbox">
-    <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
-    <label class=" form-check-label"><span>Checkbox</span></label>
+    <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+      <span>Checkbox</span>
+    </label>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>
\ No newline at end of file
diff --git a/test/renders/component-bootstrap-checkbox-readOnly-value0.html b/test/renders/component-bootstrap-checkbox-readOnly-value0.html
index bbd369d5ec..b335ef5b25 100644
--- a/test/renders/component-bootstrap-checkbox-readOnly-value0.html
+++ b/test/renders/component-bootstrap-checkbox-readOnly-value0.html
@@ -1,7 +1,9 @@
 <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <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"><span>Checkbox</span></label>
+    <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+      <span>Checkbox</span>
+    </label>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>
\ No newline at end of file
diff --git a/test/renders/component-bootstrap-checkbox-readOnly-value1.html b/test/renders/component-bootstrap-checkbox-readOnly-value1.html
index b5ace4098e..02d6d05012 100644
--- a/test/renders/component-bootstrap-checkbox-readOnly-value1.html
+++ b/test/renders/component-bootstrap-checkbox-readOnly-value1.html
@@ -1,7 +1,9 @@
 <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <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"><span>Checkbox</span></label>
+    <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+      <span>Checkbox</span>
+    </label>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>
\ No newline at end of file
diff --git a/test/renders/component-bootstrap-checkbox-readOnly-value2.html b/test/renders/component-bootstrap-checkbox-readOnly-value2.html
index bbd369d5ec..b335ef5b25 100644
--- a/test/renders/component-bootstrap-checkbox-readOnly-value2.html
+++ b/test/renders/component-bootstrap-checkbox-readOnly-value2.html
@@ -1,7 +1,9 @@
 <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <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"><span>Checkbox</span></label>
+    <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+      <span>Checkbox</span>
+    </label>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>
\ No newline at end of file
diff --git a/test/renders/component-bootstrap-checkbox-readOnly.html b/test/renders/component-bootstrap-checkbox-readOnly.html
index bbd369d5ec..b335ef5b25 100644
--- a/test/renders/component-bootstrap-checkbox-readOnly.html
+++ b/test/renders/component-bootstrap-checkbox-readOnly.html
@@ -1,7 +1,9 @@
 <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <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"><span>Checkbox</span></label>
+    <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+      <span>Checkbox</span>
+    </label>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>
\ No newline at end of file
diff --git a/test/renders/component-bootstrap-checkbox-required.html b/test/renders/component-bootstrap-checkbox-required.html
index 64a6d52e12..e817c69b35 100644
--- a/test/renders/component-bootstrap-checkbox-required.html
+++ b/test/renders/component-bootstrap-checkbox-required.html
@@ -1,7 +1,9 @@
 <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox  required" ref="component">
   <div class="form-check checkbox">
-    <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"><span>Checkbox</span></label>
+    <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+      <span>Checkbox</span>
+    </label>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>
\ No newline at end of file
diff --git a/test/renders/component-bootstrap-checkbox.html b/test/renders/component-bootstrap-checkbox.html
index c0b62ee7c1..f70b91309d 100644
--- a/test/renders/component-bootstrap-checkbox.html
+++ b/test/renders/component-bootstrap-checkbox.html
@@ -1,7 +1,9 @@
 <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
-    <label class=" form-check-label"><span>Checkbox</span></label>
+    <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+      <span>Checkbox</span>
+    </label>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>
\ No newline at end of file
diff --git a/test/renders/component-bootstrap-radio-readOnly-value0.html b/test/renders/component-bootstrap-radio-readOnly-value0.html
index 65716d3318..a65c350097 100644
--- a/test/renders/component-bootstrap-radio-readOnly-value0.html
+++ b/test/renders/component-bootstrap-radio-readOnly-value0.html
@@ -4,8 +4,8 @@
   </label>
   <div class="form-radio radio" ref="radioGroup" role="radiogroup" aria-required="false" aria-labelledby="l-radio-radio">
     <div class="radio  form-check" ref="wrapper">
-      <input ref="input" name="data[radio][undefined-radio]" type="radio" class="form-check-input" lang="en" disabled="disabled" value="" id="-radio--" role="radio">
-      <label class="form-check-label label-position-" for="-radio--"><span></span></label>
+      <input ref="input" name="data[radio][radio-radio]" type="radio" class="form-check-input" lang="en" disabled="disabled" value="" id="radio-radio--" role="radio">
+      <label class="form-check-label label-position-" for="radio-radio--"><span></span></label>
     </div>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
diff --git a/test/renders/component-bootstrap-radio-readOnly-value1.html b/test/renders/component-bootstrap-radio-readOnly-value1.html
index 65716d3318..a65c350097 100644
--- a/test/renders/component-bootstrap-radio-readOnly-value1.html
+++ b/test/renders/component-bootstrap-radio-readOnly-value1.html
@@ -4,8 +4,8 @@
   </label>
   <div class="form-radio radio" ref="radioGroup" role="radiogroup" aria-required="false" aria-labelledby="l-radio-radio">
     <div class="radio  form-check" ref="wrapper">
-      <input ref="input" name="data[radio][undefined-radio]" type="radio" class="form-check-input" lang="en" disabled="disabled" value="" id="-radio--" role="radio">
-      <label class="form-check-label label-position-" for="-radio--"><span></span></label>
+      <input ref="input" name="data[radio][radio-radio]" type="radio" class="form-check-input" lang="en" disabled="disabled" value="" id="radio-radio--" role="radio">
+      <label class="form-check-label label-position-" for="radio-radio--"><span></span></label>
     </div>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
diff --git a/test/renders/component-bootstrap-radio-readOnly-value2.html b/test/renders/component-bootstrap-radio-readOnly-value2.html
index 65716d3318..a65c350097 100644
--- a/test/renders/component-bootstrap-radio-readOnly-value2.html
+++ b/test/renders/component-bootstrap-radio-readOnly-value2.html
@@ -4,8 +4,8 @@
   </label>
   <div class="form-radio radio" ref="radioGroup" role="radiogroup" aria-required="false" aria-labelledby="l-radio-radio">
     <div class="radio  form-check" ref="wrapper">
-      <input ref="input" name="data[radio][undefined-radio]" type="radio" class="form-check-input" lang="en" disabled="disabled" value="" id="-radio--" role="radio">
-      <label class="form-check-label label-position-" for="-radio--"><span></span></label>
+      <input ref="input" name="data[radio][radio-radio]" type="radio" class="form-check-input" lang="en" disabled="disabled" value="" id="radio-radio--" role="radio">
+      <label class="form-check-label label-position-" for="radio-radio--"><span></span></label>
     </div>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
diff --git a/test/renders/component-bootstrap-radio-readOnly-value3.html b/test/renders/component-bootstrap-radio-readOnly-value3.html
index 65716d3318..a65c350097 100644
--- a/test/renders/component-bootstrap-radio-readOnly-value3.html
+++ b/test/renders/component-bootstrap-radio-readOnly-value3.html
@@ -4,8 +4,8 @@
   </label>
   <div class="form-radio radio" ref="radioGroup" role="radiogroup" aria-required="false" aria-labelledby="l-radio-radio">
     <div class="radio  form-check" ref="wrapper">
-      <input ref="input" name="data[radio][undefined-radio]" type="radio" class="form-check-input" lang="en" disabled="disabled" value="" id="-radio--" role="radio">
-      <label class="form-check-label label-position-" for="-radio--"><span></span></label>
+      <input ref="input" name="data[radio][radio-radio]" type="radio" class="form-check-input" lang="en" disabled="disabled" value="" id="radio-radio--" role="radio">
+      <label class="form-check-label label-position-" for="radio-radio--"><span></span></label>
     </div>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
diff --git a/test/renders/component-bootstrap-selectboxes-readOnly-value0.html b/test/renders/component-bootstrap-selectboxes-readOnly-value0.html
index 3584ad9a02..f1d40c8f45 100644
--- a/test/renders/component-bootstrap-selectboxes-readOnly-value0.html
+++ b/test/renders/component-bootstrap-selectboxes-readOnly-value0.html
@@ -4,8 +4,8 @@
   </label>
   <div class="form-radio radio" ref="radioGroup" role="group" aria-required="false" aria-labelledby="l-selectBoxes-selectBoxes">
     <div class="checkbox  form-check" ref="wrapper">
-      <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="" id="-selectBoxes--" role="checkbox">
-      <label class="form-check-label label-position-" for="-selectBoxes--"><span></span></label>
+      <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="" id="selectBoxes-selectBoxes--" role="checkbox">
+      <label class="form-check-label label-position-" for="selectBoxes-selectBoxes--"><span></span></label>
     </div>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
diff --git a/test/renders/component-bootstrap-selectboxes-readOnly-value1.html b/test/renders/component-bootstrap-selectboxes-readOnly-value1.html
index 3584ad9a02..f1d40c8f45 100644
--- a/test/renders/component-bootstrap-selectboxes-readOnly-value1.html
+++ b/test/renders/component-bootstrap-selectboxes-readOnly-value1.html
@@ -4,8 +4,8 @@
   </label>
   <div class="form-radio radio" ref="radioGroup" role="group" aria-required="false" aria-labelledby="l-selectBoxes-selectBoxes">
     <div class="checkbox  form-check" ref="wrapper">
-      <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="" id="-selectBoxes--" role="checkbox">
-      <label class="form-check-label label-position-" for="-selectBoxes--"><span></span></label>
+      <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="" id="selectBoxes-selectBoxes--" role="checkbox">
+      <label class="form-check-label label-position-" for="selectBoxes-selectBoxes--"><span></span></label>
     </div>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
diff --git a/test/renders/component-bootstrap-selectboxes-readOnly-value2.html b/test/renders/component-bootstrap-selectboxes-readOnly-value2.html
index 3584ad9a02..f1d40c8f45 100644
--- a/test/renders/component-bootstrap-selectboxes-readOnly-value2.html
+++ b/test/renders/component-bootstrap-selectboxes-readOnly-value2.html
@@ -4,8 +4,8 @@
   </label>
   <div class="form-radio radio" ref="radioGroup" role="group" aria-required="false" aria-labelledby="l-selectBoxes-selectBoxes">
     <div class="checkbox  form-check" ref="wrapper">
-      <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="" id="-selectBoxes--" role="checkbox">
-      <label class="form-check-label label-position-" for="-selectBoxes--"><span></span></label>
+      <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="" id="selectBoxes-selectBoxes--" role="checkbox">
+      <label class="form-check-label label-position-" for="selectBoxes-selectBoxes--"><span></span></label>
     </div>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
diff --git a/test/renders/component-bootstrap-selectboxes-readOnly-value3.html b/test/renders/component-bootstrap-selectboxes-readOnly-value3.html
index 3584ad9a02..f1d40c8f45 100644
--- a/test/renders/component-bootstrap-selectboxes-readOnly-value3.html
+++ b/test/renders/component-bootstrap-selectboxes-readOnly-value3.html
@@ -4,8 +4,8 @@
   </label>
   <div class="form-radio radio" ref="radioGroup" role="group" aria-required="false" aria-labelledby="l-selectBoxes-selectBoxes">
     <div class="checkbox  form-check" ref="wrapper">
-      <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="" id="-selectBoxes--" role="checkbox">
-      <label class="form-check-label label-position-" for="-selectBoxes--"><span></span></label>
+      <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="" id="selectBoxes-selectBoxes--" role="checkbox">
+      <label class="form-check-label label-position-" for="selectBoxes-selectBoxes--"><span></span></label>
     </div>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
diff --git a/test/renders/component-bootstrap-selectboxes-readOnly-value4.html b/test/renders/component-bootstrap-selectboxes-readOnly-value4.html
index 3584ad9a02..f1d40c8f45 100644
--- a/test/renders/component-bootstrap-selectboxes-readOnly-value4.html
+++ b/test/renders/component-bootstrap-selectboxes-readOnly-value4.html
@@ -4,8 +4,8 @@
   </label>
   <div class="form-radio radio" ref="radioGroup" role="group" aria-required="false" aria-labelledby="l-selectBoxes-selectBoxes">
     <div class="checkbox  form-check" ref="wrapper">
-      <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="" id="-selectBoxes--" role="checkbox">
-      <label class="form-check-label label-position-" for="-selectBoxes--"><span></span></label>
+      <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="" id="selectBoxes-selectBoxes--" role="checkbox">
+      <label class="form-check-label label-position-" for="selectBoxes-selectBoxes--"><span></span></label>
     </div>
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
diff --git a/test/renders/form-bootstrap-basic.html b/test/renders/form-bootstrap-basic.html
index da243e92e8..f293abed9b 100644
--- a/test/renders/form-bootstrap-basic.html
+++ b/test/renders/form-bootstrap-basic.html
@@ -99,8 +99,10 @@
     </div>
     <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
-        <label class=" form-check-label"><span>Checkbox</span></label>
+        <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+          <span>Checkbox</span>
+        </label>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-calculateValueWithManualOverride.html b/test/renders/form-bootstrap-calculateValueWithManualOverride.html
index 2c6d872b26..0fbe3aa48c 100644
--- a/test/renders/form-bootstrap-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap-calculateValueWithManualOverride.html
@@ -19,8 +19,10 @@
         <div role="tabpanel" class="card-body tab-pane" style="display: block" ref="tab-tabs">
           <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
             <div class="form-check checkbox">
-              <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
-              <label class=" form-check-label"><span>hide</span></label>
+              <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+                <span>hide</span>
+              </label>
             </div>
             <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
           </div>
diff --git a/test/renders/form-bootstrap-data.html b/test/renders/form-bootstrap-data.html
index 5ad4862464..5f3b441db5 100644
--- a/test/renders/form-bootstrap-data.html
+++ b/test/renders/form-bootstrap-data.html
@@ -220,8 +220,10 @@
     </div>
     <div id="show" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
-        <label class=" form-check-label"><span>Show</span></label>
+        <input ref="input" id="show-show" aria-labelledby="l-show-show" 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">
+          <span>Show</span>
+        </label>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
@@ -246,7 +248,7 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                  <input ref="input" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
                 </div>
                 <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
               </div>
diff --git a/test/renders/form-bootstrap-defaults.html b/test/renders/form-bootstrap-defaults.html
index 201abbe9e8..5da1c9d389 100644
--- a/test/renders/form-bootstrap-defaults.html
+++ b/test/renders/form-bootstrap-defaults.html
@@ -39,15 +39,19 @@
     </div>
     <div id="checkboxFalse" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
-        <label class=" form-check-label"><span>Checkbox False</span></label>
+        <input ref="input" id="checkboxFalse-checkboxFalse" aria-labelledby="l-checkboxFalse-checkboxFalse" 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">
+          <span>Checkbox False</span>
+        </label>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
     <div id="checkboxTrue" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <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"><span>Checkbox True</span></label>
+        <input ref="input" id="checkboxTrue-checkboxTrue" aria-labelledby="l-checkboxTrue-checkboxTrue" 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">
+          <span>Checkbox True</span>
+        </label>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap-formComponentWithConditionalRenderingForm.html
index a236821198..5063918c35 100644
--- a/test/renders/form-bootstrap-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,10 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
-        <label class=" form-check-label"><span>Checkbox</span></label>
+        <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+          <span>Checkbox</span>
+        </label>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-formWithAdvancedLogic.html b/test/renders/form-bootstrap-formWithAdvancedLogic.html
index e6d5bf021d..37707f56f7 100644
--- a/test/renders/form-bootstrap-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap-formWithAdvancedLogic.html
@@ -2,8 +2,10 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <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"><span>Checkbox</span></label>
+        <input ref="input" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" 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">
+          <span>Checkbox</span>
+        </label>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-modalEditComponents.html b/test/renders/form-bootstrap-modalEditComponents.html
index 5a7d60d244..a6e307d0f6 100644
--- a/test/renders/form-bootstrap-modalEditComponents.html
+++ b/test/renders/form-bootstrap-modalEditComponents.html
@@ -10,8 +10,10 @@
           <div ref="modalContents">
             <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
-                <label class=" form-check-label"><span>Checkbox</span></label>
+                <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+                  <span>Checkbox</span>
+                </label>
               </div>
               <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
             </div>
diff --git a/test/renders/form-bootstrap-premium.html b/test/renders/form-bootstrap-premium.html
index a0022d0759..8be3eccc00 100644
--- a/test/renders/form-bootstrap-premium.html
+++ b/test/renders/form-bootstrap-premium.html
@@ -68,7 +68,7 @@
           </div>
           <div id="valid" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+              <input ref="input" id="valid-valid" aria-labelledby="l-valid-valid" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
             </div>
             <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
           </div>
diff --git a/test/renders/form-bootstrap-readOnly-basic.html b/test/renders/form-bootstrap-readOnly-basic.html
index 9b78437dd8..b1a238c9ab 100644
--- a/test/renders/form-bootstrap-readOnly-basic.html
+++ b/test/renders/form-bootstrap-readOnly-basic.html
@@ -83,8 +83,10 @@
     </div>
     <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <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"><span>Checkbox</span></label>
+        <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+          <span>Checkbox</span>
+        </label>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html b/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html
index d924be2828..83a6adf711 100644
--- a/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html
@@ -19,8 +19,10 @@
         <div role="tabpanel" class="card-body tab-pane" style="display: block" ref="tab-tabs">
           <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
             <div class="form-check checkbox">
-              <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"><span>hide</span></label>
+              <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+                <span>hide</span>
+              </label>
             </div>
             <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
           </div>
diff --git a/test/renders/form-bootstrap-readOnly-data.html b/test/renders/form-bootstrap-readOnly-data.html
index 5b952d9b10..5d022ba851 100644
--- a/test/renders/form-bootstrap-readOnly-data.html
+++ b/test/renders/form-bootstrap-readOnly-data.html
@@ -197,8 +197,10 @@
     </div>
     <div id="show" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <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"><span>Show</span></label>
+        <input ref="input" id="show-show" aria-labelledby="l-show-show" 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">
+          <span>Show</span>
+        </label>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
@@ -220,7 +222,7 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                  <input ref="input" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
                 </div>
                 <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
               </div>
diff --git a/test/renders/form-bootstrap-readOnly-defaults.html b/test/renders/form-bootstrap-readOnly-defaults.html
index 01b58b5764..00fd9f08f5 100644
--- a/test/renders/form-bootstrap-readOnly-defaults.html
+++ b/test/renders/form-bootstrap-readOnly-defaults.html
@@ -43,15 +43,19 @@
     </div>
     <div id="checkboxFalse" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <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"><span>Checkbox False</span></label>
+        <input ref="input" id="checkboxFalse-checkboxFalse" aria-labelledby="l-checkboxFalse-checkboxFalse" 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">
+          <span>Checkbox False</span>
+        </label>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
     <div id="checkboxTrue" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <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"><span>Checkbox True</span></label>
+        <input ref="input" id="checkboxTrue-checkboxTrue" aria-labelledby="l-checkboxTrue-checkboxTrue" 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">
+          <span>Checkbox True</span>
+        </label>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-readOnly-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap-readOnly-formComponentWithConditionalRenderingForm.html
index 8befa7a907..85c94ddfd8 100644
--- a/test/renders/form-bootstrap-readOnly-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap-readOnly-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,10 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <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"><span>Checkbox</span></label>
+        <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+          <span>Checkbox</span>
+        </label>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-readOnly-formWithAdvancedLogic.html b/test/renders/form-bootstrap-readOnly-formWithAdvancedLogic.html
index 64a5903255..408270aca7 100644
--- a/test/renders/form-bootstrap-readOnly-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap-readOnly-formWithAdvancedLogic.html
@@ -2,8 +2,10 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <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"><span>Checkbox</span></label>
+        <input ref="input" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" 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">
+          <span>Checkbox</span>
+        </label>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-readOnly-modalEditComponents.html b/test/renders/form-bootstrap-readOnly-modalEditComponents.html
index 12fa9ae9b4..8cc7b14633 100644
--- a/test/renders/form-bootstrap-readOnly-modalEditComponents.html
+++ b/test/renders/form-bootstrap-readOnly-modalEditComponents.html
@@ -10,8 +10,10 @@
           <div ref="modalContents">
             <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <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"><span>Checkbox</span></label>
+                <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+                  <span>Checkbox</span>
+                </label>
               </div>
               <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
             </div>
diff --git a/test/renders/form-bootstrap-readOnly-premium.html b/test/renders/form-bootstrap-readOnly-premium.html
index bdc6a3c936..a3f138af45 100644
--- a/test/renders/form-bootstrap-readOnly-premium.html
+++ b/test/renders/form-bootstrap-readOnly-premium.html
@@ -44,7 +44,7 @@
           </div>
           <div id="valid" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+              <input ref="input" id="valid-valid" aria-labelledby="l-valid-valid" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
             </div>
             <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
           </div>
diff --git a/test/renders/form-bootstrap-readOnly-settingErrors.html b/test/renders/form-bootstrap-readOnly-settingErrors.html
index 953f005243..ce4a65e869 100644
--- a/test/renders/form-bootstrap-readOnly-settingErrors.html
+++ b/test/renders/form-bootstrap-readOnly-settingErrors.html
@@ -55,8 +55,10 @@
     offset-md-0" ref="column-columns">
                     <div id="checkboxColumn" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <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"><span>Checkbox - Column</span></label>
+                        <input ref="input" id="checkboxColumn-checkboxColumn" aria-labelledby="l-checkboxColumn-checkboxColumn" 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">
+                          <span>Checkbox - Column</span>
+                        </label>
                       </div>
                       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                     </div>
diff --git a/test/renders/form-bootstrap-readOnly-tooltipActivateCheckbox.html b/test/renders/form-bootstrap-readOnly-tooltipActivateCheckbox.html
index e4ceb1a4bb..689ed474cc 100644
--- a/test/renders/form-bootstrap-readOnly-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap-readOnly-tooltipActivateCheckbox.html
@@ -2,8 +2,10 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <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"><span>Checkbox</span></label>
+        <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+          <span>Checkbox</span>
+        </label>
         <i ref="tooltip" tabindex="0" class="fa fa-question-sign bi bi-question-circle text-muted" data-tooltip="tooltip"></i>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
diff --git a/test/renders/form-bootstrap-readOnly-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap-readOnly-wizardWithSimpleConditionalPage.html
index f697af877e..d0499812a7 100644
--- a/test/renders/form-bootstrap-readOnly-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap-readOnly-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,10 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <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"><span>Checkbox</span></label>
+          <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+            <span>Checkbox</span>
+          </label>
         </div>
         <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
       </div>
diff --git a/test/renders/form-bootstrap-settingErrors.html b/test/renders/form-bootstrap-settingErrors.html
index 39d901b354..31fee73e37 100644
--- a/test/renders/form-bootstrap-settingErrors.html
+++ b/test/renders/form-bootstrap-settingErrors.html
@@ -55,8 +55,10 @@
     offset-md-0" ref="column-columns">
                     <div id="checkboxColumn" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <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"><span>Checkbox - Column</span></label>
+                        <input ref="input" id="checkboxColumn-checkboxColumn" aria-labelledby="l-checkboxColumn-checkboxColumn" 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">
+                          <span>Checkbox - Column</span>
+                        </label>
                       </div>
                       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                     </div>
diff --git a/test/renders/form-bootstrap-tooltipActivateCheckbox.html b/test/renders/form-bootstrap-tooltipActivateCheckbox.html
index c146d9fb7b..3aafd6abb2 100644
--- a/test/renders/form-bootstrap-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap-tooltipActivateCheckbox.html
@@ -2,8 +2,10 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
-        <label class=" form-check-label"><span>Checkbox</span></label>
+        <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+          <span>Checkbox</span>
+        </label>
         <i ref="tooltip" tabindex="0" class="fa fa-question-sign bi bi-question-circle text-muted" data-tooltip="tooltip"></i>
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
diff --git a/test/renders/form-bootstrap-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap-wizardWithSimpleConditionalPage.html
index b7cb392b88..474d25491c 100644
--- a/test/renders/form-bootstrap-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,10 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
-          <label class=" form-check-label"><span>Checkbox</span></label>
+          <input ref="input" id="checkbox-checkbox" aria-labelledby="l-checkbox-checkbox" 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">
+            <span>Checkbox</span>
+          </label>
         </div>
         <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
       </div>
diff --git a/yarn.lock b/yarn.lock
index 20eb901e1a..86bed8b5f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -251,10 +251,10 @@
   resolved "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
-"@formio/bootstrap@^3.0.0-rc.23":
-  version "3.0.0-rc.23"
-  resolved "https://registry.npmjs.org/@formio/bootstrap/-/bootstrap-3.0.0-rc.23.tgz#3387dc3692677e20b9f08be6fd08cd40b3f9fb64"
-  integrity sha512-xtcG+Hr56rPqq2/cKUlpg5iUfkArMEK0bLymnXHi94XCq1WgAbdadUl3S75MH5lDxhv2siKv5r5NTJoCN2oXeQ==
+"@formio/bootstrap@^3.0.0-rc.24":
+  version "3.0.0-rc.24"
+  resolved "https://registry.npmjs.org/@formio/bootstrap/-/bootstrap-3.0.0-rc.24.tgz#b410350f002c35715ce1d7ef3f7dd4fdc0a0cfd7"
+  integrity sha512-ORFB0HGKrNs1bI+PK30iMNM43jIlrg5ti8bQipdpZXQiof6Vc1Js2EMHOmYqJEpabwUpK1poUmD4eIz6RKPEog==
 
 "@formio/choices.js@^10.2.1":
   version "10.2.1"