Visual glitch with checkbox field statamic#3183

berdjabrahamian · Feb 9, 2021 · c8a4a68 · c8a4a68
1 parent 29898c9
commit c8a4a68
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/resources/js/components/fieldtypes/CheckboxesFieldtype.vue b/resources/js/components/fieldtypes/CheckboxesFieldtype.vue
@@ -1,14 +1,14 @@
 <template>
     <div class="checkboxes-fieldtype-wrapper"  :class="{'inline-mode': config.inline}">
         <div class="option" v-for="(option, $index) in options" :key="$index">
-            <label>
-                <input type="checkbox"
-                       ref="checkbox"
-                       :name="name + '[]'"
-                       :value="option.value"
-                       :disabled="isReadOnly"
-                       v-model="values"
-                />
+            <input type="checkbox"
+                   ref="checkbox"
+                   :name="name + '[]'"
+                   :value="option.value"
+                   :disabled="isReadOnly"
+                   v-model="values"
+            />
+            <label :for="name + '[]'">
                 {{ option.label || option.value }}
             </label>
         </div>

diff --git a/resources/js/components/fieldtypes/RadioFieldtype.vue b/resources/js/components/fieldtypes/RadioFieldtype.vue
@@ -5,15 +5,15 @@
             :key="$index"
             class="option"
         >
-            <label>
-                <input type="radio"
-                    ref="radio"
-                    :name="name"
-                    @input="update($event.target.value)"
-                    :value="option.value"
-                    :disabled="isReadOnly"
-                    :checked="value === option.value"
-                />
+            <input type="radio"
+                   ref="radio"
+                   :name="name"
+                   @input="update($event.target.value)"
+                   :value="option.value"
+                   :disabled="isReadOnly"
+                   :checked="value === option.value"
+            />
+            <label :for="name">
                 {{ option.label || option.value }}
             </label>
         </div>