From 511f333b1dbc43a680e83591750be9633b71a096 Mon Sep 17 00:00:00 2001
From: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>
Date: Tue, 2 Feb 2021 14:36:30 +0200
Subject: [PATCH] fix(storefront): BCTHEME-356 Required checkbox message blocks
 the checkbox (#1963)

---
 CHANGELOG.md                                  |  2 ++
 .../amp/products/options/input-checkbox.html  | 20 +++++++-------
 .../products/options/input-checkbox.html      | 26 ++++++++++---------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e116cbab34..6400ca0195 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Changelog
 
+- Fixed required checkbox message displaying. [1963](https://github.com/bigcommerce/cornerstone/pull/1963)
+
 ## Draft
 - If multiple Pick List Options are applied, customers cannot select "none" on both. [#1975](https://github.com/bigcommerce/cornerstone/pull/1975)
 - Moved phrase from compare.html to en.json for increasing localization. [#1972](https://github.com/bigcommerce/cornerstone/pull/1972)
diff --git a/templates/components/amp/products/options/input-checkbox.html b/templates/components/amp/products/options/input-checkbox.html
index e4d4ee6a87..e14c3aab19 100644
--- a/templates/components/amp/products/options/input-checkbox.html
+++ b/templates/components/amp/products/options/input-checkbox.html
@@ -6,13 +6,15 @@
             <small>{{lang 'common.required'}}</small>
         {{/if}}
     </label>
-    <input
-        class="form-checkbox"
-        type="checkbox"
-        name="attribute[{{id}}]"
-        id="attribute-{{id}}"
-        value="{{value}}"
-        {{#if checked}}checked{{/if}}
-        {{#if required}}required{{/if}}>
-    <label class="form-label {{class}}" for="attribute-{{id}}">{{label}}</label>
+    <div class="form-option-wrapper">
+        <input
+            class="form-checkbox"
+            type="checkbox"
+            name="attribute[{{id}}]"
+            id="attribute-{{id}}"
+            value="{{value}}"
+            {{#if checked}}checked{{/if}}
+            {{#if required}}required{{/if}}>
+        <label class="form-label {{class}}" for="attribute-{{id}}">{{label}}</label>
+    </div>
 </div>
diff --git a/templates/components/products/options/input-checkbox.html b/templates/components/products/options/input-checkbox.html
index 7d0154d370..6c2f0e8224 100644
--- a/templates/components/products/options/input-checkbox.html
+++ b/templates/components/products/options/input-checkbox.html
@@ -5,17 +5,19 @@
         {{> components/common/requireness-msg}}
     </label>
     <input type="hidden" name="attribute[{{id}}]" value="{{noValue}}" />
-    <input
-        class="form-checkbox"
-        type="checkbox"
-        name="attribute[{{id}}]"
-        id="attribute-check-{{id}}"
-        value="{{value}}"
-        {{#if checked}}
-            checked
-            data-default
-        {{/if}}
-        {{#if required}}required{{/if}}>
+    <div class="form-option-wrapper">
+        <input
+            class="form-checkbox"
+            type="checkbox"
+            name="attribute[{{id}}]"
+            id="attribute-check-{{id}}"
+            value="{{value}}"
+            {{#if checked}}
+                checked
+                data-default
+            {{/if}}
+            {{#if required}}required{{/if}}>
 
-    <label class="form-label {{class}}" for="attribute-check-{{id}}">{{label}}</label>
+        <label class="form-label {{class}}" for="attribute-check-{{id}}">{{label}}</label>
+    </div>
 </div>