From: Brian Shanley <bshanley@gmail.com>
Date: Mon, 14 May 2018 10:18:47 +0000 (+0100)
Subject: Fix: Docs: clashing IDs in form checkboxes
X-Git-Tag: v6.6.0~3^2~188^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F11262%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Fix: Docs: clashing IDs in form checkboxes

Checkbox IDs in the "Forms" component are the same as in "Abide" and clashing with each other.
I have changed the IDs in "Forms" so they are distinct
---

diff --git a/docs/pages/kitchen-sink.md b/docs/pages/kitchen-sink.md
index 4a413603c..88e8a05c0 100644
--- a/docs/pages/kitchen-sink.md
+++ b/docs/pages/kitchen-sink.md
@@ -553,15 +553,15 @@ description: Everything but.
   <div class="grid-x grid-margin-x">
     <fieldset class="cell large-6">
       <legend>Choose Your Favorite</legend>
-      <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
-      <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
-      <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
+      <input type="radio" name="pokemon" value="Red" id="formRed" required><label for="formRed">Red</label>
+      <input type="radio" name="pokemon" value="Blue" id="formBlue"><label for="formBlue">Blue</label>
+      <input type="radio" name="pokemon" value="Yellow" id="formYellow"><label for="formYellow">Yellow</label>
     </fieldset>
     <fieldset class="cell large-6">
       <legend>Check these out</legend>
-      <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
-      <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
-      <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
+      <input id="formCheckbox1" type="checkbox"><label for="formCheckbox1">Checkbox 1</label>
+      <input id="formCheckbox2" type="checkbox"><label for="formCheckbox2">Checkbox 2</label>
+      <input id="formCheckbox3" type="checkbox"><label for="formCheckbox3">Checkbox 3</label>
     </fieldset>
   </div>
   <div class="grid-x grid-margin-x">