docs: add required radio & checkbox

diff --git a/docs/pages/abide.md b/docs/pages/abide.md
index 2cc6608405b40d257959e5ae77f2ad8fcc01c9f2..e317896015de02e5c17dfd25e1b453e5db5cac4d 100644 (file)
--- a/docs/pages/abide.md
+++ b/docs/pages/abide.md
@@ -246,6 +246,46 @@ When the Form Errors cannot be placed next to its field, like in an Input Group,
 </form>
 ```
 
+## Required Radio & Checkbox
+
+If you add `required` to a radio or checkbox input the whole group gets considered as required. This means at least one of the inputs must be checked.
+Checkbox inputs support the additional attribute `data-min-required` what lets you specify how many checkboxes in the group must be checked (default is one).
+
+
+```html_example
+<form data-abide novalidate>
+  <div class="grid-x grid-margin-x align-bottom">
+    <div class="cell medium-6 large-4">
+      <fieldset>
+        <legend>Radio Group</legend>
+        <input type="radio" name="exampleRadio" id="exampleRadioA" value="A">
+        <label for="exampleRadioA">A</label>
+        <input required type="radio" name="exampleRadio" id="exampleRadioB" value="B">
+        <label for="exampleRadioB">B</label>
+        <input type="radio" name="exampleRadio" id="exampleRadioC" value="C">
+        <label for="exampleRadioC">C</label>
+      </fieldset>
+    </div>
+    <div class="cell medium-6 large-4">
+      <fieldset>
+        <legend>Checkbox Group</legend>
+        <input data-min-required="2" type="checkbox" name="exampleCheckbox" id="exampleCheckboxA" value="A">
+        <label for="exampleCheckboxA">A</label>
+        <input required type="checkbox" name="exampleCheckbox" id="exampleCheckboxB" value="B">
+        <label for="exampleCheckboxB">B</label>
+        <input type="checkbox" name="exampleCheckbox" id="exampleCheckboxC" value="C">
+        <label for="exampleCheckboxC">C</label>
+      </fieldset>
+    </div>
+    <div class="cell large-4">
+      <button class="button" type="submit">Submit</button>
+    </div>
+  </div>
+</form>
+```
+
+---
+
 ## Event Listener
 Setup event listener after foundation is initialized (especially for formvalid/forminvalid). Easier to chain via document selector.
 * valid.zf.abide and invalid.zf.abide are field level events, triggered in validateInput function