Fix form elements demo page radio buttons (#1198)

tabler · Aug 17, 2022 · 620b210 · 620b210
1 parent ea1d973
commit 620b210
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git a/demo/form-elements.html b/demo/form-elements.html
@@ -1382,11 +1382,11 @@ <h4 class="card-title">Form elements</h4>
                             <div class="form-label">Radios</div>
                             <div>
                               <label class="form-check">
-                                <input class="form-check-input" type="radio" checked>
+                                <input class="form-check-input" type="radio" name="radio-group" checked>
                                 <span class="form-check-label">Option 1</span>
                               </label>
                               <label class="form-check">
-                                <input class="form-check-input" type="radio">
+                                <input class="form-check-input" type="radio" name="radio-group">
                                 <span class="form-check-label">Option 2</span>
                               </label>
                               <label class="form-check">
@@ -1403,15 +1403,15 @@ <h4 class="card-title">Form elements</h4>
                             <div class="form-label">Inline Radios</div>
                             <div>
                               <label class="form-check form-check-inline">
-                                <input class="form-check-input" type="radio" checked>
+                                <input class="form-check-input" type="radio" name="inline-radios" checked>
                                 <span class="form-check-label">Option 1</span>
                               </label>
                               <label class="form-check form-check-inline">
-                                <input class="form-check-input" type="radio">
+                                <input class="form-check-input" type="radio" name="inline-radios">
                                 <span class="form-check-label">Option 2</span>
                               </label>
                               <label class="form-check form-check-inline">
-                                <input class="form-check-input" type="radio" disabled>
+                                <input class="form-check-input" type="radio" name="inline-radios" disabled>
                                 <span class="form-check-label">Option 3</span>
                               </label>
                             </div>
@@ -2522,4 +2522,4 @@ <h3 class="card-title">Horizontal form</h3>
     });
   </script>
 </body>
-</html>
+</html>
diff --git a/src/pages/_includes/parts/form/input-radios-inline.html b/src/pages/_includes/parts/form/input-radios-inline.html
@@ -1,8 +1,8 @@
 <div class="mb-3">
    <div class="form-label">Inline Radios</div>
    <div>
-      {% include ui/form/check.html title="Option 1" type="radio" inline=true checked=true %}
-      {% include ui/form/check.html title="Option 2" type="radio" inline=true %}
-      {% include ui/form/check.html title="Option 3" type="radio" inline=true disabled=true %}
+      {% include ui/form/check.html title="Option 1" type="radio" name="radios-inline" inline=true checked=true %}
+      {% include ui/form/check.html title="Option 2" type="radio" name="radios-inline" inline=true %}
+      {% include ui/form/check.html title="Option 3" type="radio" name="radios-inline" inline=true disabled=true %}
    </div>
 </div>
diff --git a/src/pages/_includes/parts/form/input-radios.html b/src/pages/_includes/parts/form/input-radios.html
@@ -1,8 +1,8 @@
 <div class="mb-3">
    <div class="form-label">Radios</div>
    <div>
-      {% include ui/form/check.html title="Option 1" type="radio" checked=true %}
-      {% include ui/form/check.html title="Option 2" type="radio" %}
+      {% include ui/form/check.html title="Option 1" type="radio" name="radios" checked=true %}
+      {% include ui/form/check.html title="Option 2" type="radio" name="radios" %}
       {% include ui/form/check.html title="Option 3" type="radio" disabled=true %}
       {% include ui/form/check.html title="Option 4" type="radio" disabled=true checked=true %}
    </div>

diff --git a/src/pages/_includes/ui/form/check.html b/src/pages/_includes/ui/form/check.html
@@ -3,6 +3,7 @@
 {% assign disabled = include.disabled | default: false %}
 {% assign switch = include.switch | default: false %}
 {% assign title = include.title | default: false %}
+{% assign name = include.name | default: false %}
 {% assign is_empty = include['empty'] | default: false %}
 {% unless title %}
    {% assign title = '' %}
@@ -13,6 +14,6 @@
    {% assign title = title | append: ' input' | lstrip | capitalize %}
 {% endunless %}
 <label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
-   <input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
+   <input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}"{% if name %} name="{{ name }}"{% endif %}{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
    {% unless is_empty %}<span class="form-check-label">{{ title }}</span>{% endunless %}
 </label>