Recommend radio / checkbox classes in the markup

When building the new radios / checkboxes we didn’t want it to be a breaking change that would require a code audit, so we changed the JS (in alphagov/govuk_frontend_toolkit#317) to automatically add them. We should, however, have put this solution through a perf test. On a slower connection or bigger page there’s a noticeable delay before the inputs appear. While the JS will automatically add the classes if needed, there shouldn’t be any problem with developers manually updating their markup to include them. This would mitigate the performance problem. This updates our markup recommendations to include those classes.
alphagov · Nov 25, 2016 · c0c87c3 · c0c87c3
1 parent 537a4c1
commit c0c87c3
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 42 deletions.
diff --git a/app/views/examples/example_form_elements.html b/app/views/examples/example_form_elements.html
@@ -40,7 +40,7 @@ <h2 class="heading-medium">
                   This is the label text in bold
                 </span>
               </legend>
-              <label class="block-label" for="example-radio-yes-no-yes">
+              <label class="block-label selection-button-radio" for="example-radio-yes-no-yes">
                 <input id="example-radio-yes-no-yes" type="radio" name="example-yes-no-group" value="Yes">
                   Yes
               </label>
@@ -86,7 +86,7 @@ <h2 class="heading-medium">
                   This is hint text
                 </span>
               </legend>
-              <label class="block-label" for="radio-yes-no-yes-b">
+              <label class="block-label selection-button-radio" for="radio-yes-no-yes-b">
                 <input id="radio-yes-no-yes-b" type="radio" name="yes-no-group-b" value="Yes">
                   Yes
               </label>
@@ -166,7 +166,7 @@ <h2 class="heading-medium">
                   Error message goes here
                 </span>
               </legend>
-              <label class="block-label" for="radio-yes-no-yes-c">
+              <label class="block-label selection-button-radio" for="radio-yes-no-yes-c">
                 <input id="radio-yes-no-yes-c" type="radio" name="yes-no-group-c" value="Yes">
                   Yes
               </label>
@@ -211,11 +211,11 @@ <h3 class="heading-medium">
                 Do you already have a personal user account?
               </span>
             </legend>
-            <label class="block-label" for="radio-inline-1a">
+            <label class="block-label selection-button-radio" for="radio-inline-1a">
               <input id="radio-inline-1a" type="radio" name="radio-inline-group" value="Yes">
               Yes
             </label>
-            <label class="block-label" for="radio-inline-2a">
+            <label class="block-label selection-button-radio" for="radio-inline-2a">
               <input id="radio-inline-2a" type="radio" name="radio-inline-group" value="No">
               No
             </label>
@@ -234,11 +234,11 @@ <h3 class="heading-medium">
               </span>
             </legend>
             <div class="form-group">
-              <label class="block-label" data-target="yes-and-do-next" for="radio-yes-no-yes-a">
+              <label class="block-label selection-button-radio" data-target="yes-and-do-next" for="radio-yes-no-yes-a">
                 <input id="radio-yes-no-yes-a" type="radio" name="yes-no-group-a" value="Yes">
                 Yes
               </label>
-              <label class="block-label" data-target="no-and-do-next" for="radio-yes-no-no-a">
+              <label class="block-label selection-button-radio" data-target="no-and-do-next" for="radio-yes-no-no-a">
                 <input id="radio-yes-no-no-a" type="radio" name="yes-no-group-a" value="No">
                 No
               </label>

diff --git a/app/views/examples/example_radios_checkboxes.html b/app/views/examples/example_radios_checkboxes.html
@@ -37,17 +37,17 @@ <h1 class="heading-large">
 
             <legend class="visually-hidden">What is your nationality?</legend>
 
-            <label for="nationality_british" class="block-label">
+            <label for="nationality_british" class="block-label selection-button-checkbox">
               <input type="checkbox" name="nationality_british" value="British" id="nationality_british">
               British
             </label>
 
-            <label for="nationality_irish" class="block-label">
+            <label for="nationality_irish" class="block-label selection-button-checkbox">
               <input type="checkbox" name="nationality_irish" value="Irish" id="nationality_irish">
               Irish
             </label>
 
-            <label for="nationality_other" class="block-label" data-target="example_nationality_other">
+            <label for="nationality_other" class="block-label selection-button-checkbox" data-target="example_nationality_other">
               <input type="checkbox" name="nationality_other" value="Wales" id="nationality_other">
               Citizen of another country
             </label>
@@ -73,12 +73,12 @@ <h1 class="heading-large">
               Where should we send your new passport?
             </legend>
 
-            <label for="radio-home-address" class="block-label">
+            <label for="radio-home-address" class="block-label selection-button-radio">
               <input id="radio-home-address" type="radio" name="radio-indent-group" value="Yes">
               Home address
             </label>
 
-            <label for="radio-other-address" class="block-label" data-target="example-other-address">
+            <label for="radio-other-address" class="block-label selection-button-radio" data-target="example-other-address">
               <input id="radio-other-address" type="radio" name="radio-indent-group" value="No">
               Other address
             </label>
@@ -136,13 +136,13 @@ <h1 class="heading-large">
               Which part of the Housing Act was your licence isued under?
             </legend>
 
-            <label for="radio-part-2" class="block-label">
+            <label for="radio-part-2" class="block-label selection-button-radio">
               <input id="radio-part-2" type="radio" name="housing-act" value="Part 2">
               <span class="heading-small">Part 2 of the Housing Act 2004</span><br>
               For properties that are 3 or more stories high and occupied by 5 or more people
             </label>
 
-            <label for="radio-part-3" class="block-label">
+            <label for="radio-part-3" class="block-label selection-button-radio">
               <input id="radio-part-3" type="radio" name="housing-act" value="Part 3">
               <span class="heading-small">Part 3 of the Housing Act 2004</span><br>
               For properties that are within a geographical area defined by a local council

diff --git a/app/views/snippets/form_checkboxes.html b/app/views/snippets/form_checkboxes.html
@@ -6,15 +6,15 @@ <h3 class="heading-medium">Which types of waste do you transport regularly?</h3>
 
     <legend class="visually-hidden">Which types of waste do you transport regularly?</legend>
 
-    <label class="block-label" for="waste-type-1">
+    <label class="block-label selection-button-checkbox" for="waste-type-1">
       <input id="waste-type-1" name="waste-types" type="checkbox" value="waste-animal">
       Waste from animal carcasses
     </label>
-    <label class="block-label" for="waste-type-2">
+    <label class="block-label selection-button-checkbox" for="waste-type-2">
       <input id="waste-type-2" name="waste-types" type="checkbox" value="waste-mines">
       Waste from mines or quarries
     </label>
-    <label class="block-label" for="waste-type-3">
+    <label class="block-label selection-button-checkbox" for="waste-type-3">
       <input id="waste-type-3" name="waste-types" type="checkbox" value="waste-farm-agricultural">
       Farm or agricultural waste
     </label>

diff --git a/app/views/snippets/form_error_radio.html b/app/views/snippets/form_error_radio.html
@@ -41,14 +41,14 @@ <h1 class="heading-large">
 
     </legend>
 
-    <label class="block-label" for="personal_details_yes">
+    <label class="block-label selection-button-radio" for="personal_details_yes">
       <input id="personal_details_yes" type="radio" name="personalDetails" value="Yes">
-      <span></span> Yes, my personal details are correct
+      Yes, my personal details are correct
     </label>
 
-    <label class="block-label" for="personal_details_no">
+    <label class="block-label selection-button-radio" for="personal_details_no">
       <input id="personal_details_no" type="radio" name="personalDetails" value="No">
-      <span></span> No, some details are wrong or have changed
+      No, some details are wrong or have changed
     </label>
 
   </fieldset>

diff --git a/app/views/snippets/form_error_radio_show_errors.html b/app/views/snippets/form_error_radio_show_errors.html
@@ -37,12 +37,12 @@ <h1 class="heading-large">
 
       </legend>
 
-      <label class="block-label" for="personal_details_yes">
+      <label class="block-label selection-button-radio" for="personal_details_yes">
         <input id="personal_details_yes" type="radio" name="personalDetails" value="Yes">
         <span></span> Yes, my personal details are correct
       </label>
 
-      <label class="block-label" for="personal_details_no">
+      <label class="block-label selection-button-radio" for="personal_details_no">
         <input id="personal_details_no" type="radio" name="personalDetails" value="No">
         <span></span> No, some details are wrong or have changed
       </label>

diff --git a/app/views/snippets/form_inset_checkboxes.html b/app/views/snippets/form_inset_checkboxes.html
@@ -11,15 +11,15 @@ <h1 class="heading-medium">
 
       <legend class="visually-hidden">What is your nationality?</legend>
 
-      <label class="block-label" for="nationalities-british">
+      <label class="block-label selection-button-checkbox" for="nationalities-british">
         <input id="nationalities-british" name="nationalities" type="checkbox" value="British">
         British (including English, Scottish, Welsh and Northern Irish)
       </label>
-      <label class="block-label" for="nationalities-irish">
+      <label class="block-label selection-button-checkbox" for="nationalities-irish">
         <input id="nationalities-irish" name="nationalities" type="checkbox" value="Irish">
         Irish
       </label>
-      <label class="block-label" for="nationalities-other" data-target="example-different-country">
+      <label class="block-label selection-button-checkbox" for="nationalities-other" data-target="example-different-country">
         <input id="nationalities-other" name="nationalities" type="checkbox" value="Citizen of a different country">
         Citizen of a different country
       </label>

diff --git a/app/views/snippets/form_inset_radios.html b/app/views/snippets/form_inset_radios.html
@@ -8,7 +8,7 @@ <h1 class="heading-medium">
 
       <legend class="visually-hidden">How do you want to be contacted?</legend>
 
-      <label class="block-label" data-target="contact-by-email" for="example-contact-by-email">
+      <label class="block-label selection-button-radio" data-target="contact-by-email" for="example-contact-by-email">
         <input id="example-contact-by-email" type="radio" name="radio-contact-group" value="Yes">
         Email
       </label>
@@ -17,7 +17,7 @@ <h1 class="heading-medium">
         <input class="form-control" name="contact-email" type="text" id="contact-email">
       </div>
 
-      <label class="block-label" data-target="contact-by-phone" for="example-contact-by-phone">
+      <label class="block-label selection-button-radio" data-target="contact-by-phone" for="example-contact-by-phone">
         <input id="example-contact-by-phone" type="radio" name="radio-contact-group" value="No">
         Phone
       </label>
@@ -26,7 +26,7 @@ <h1 class="heading-medium">
         <input class="form-control" name="contact-phone" type="text" id="contact-phone">
       </div>
 
-      <label class="block-label" data-target="contact-by-text" for="example-contact-by-text">
+      <label class="block-label selection-button-radio" data-target="contact-by-text" for="example-contact-by-text">
         <input id="example-contact-by-text" type="radio" name="radio-contact-group" value="No">
         Text message
       </label>

diff --git a/app/views/snippets/form_inset_radios_show_errors.html b/app/views/snippets/form_inset_radios_show_errors.html
@@ -12,7 +12,7 @@ <h1 class="heading-medium" id="example-conditional-errors">
         <span class="error-message">Choose an answer</span>
       </legend>
 
-      <label class="block-label" data-target="paid-weekly" for="example-paid-weekly">
+      <label class="block-label selection-button-radio" data-target="paid-weekly" for="example-paid-weekly">
         <input type="radio" name="radio-income-group" value="Yes" id="example-paid-weekly">
         Weekly
       </label>
@@ -21,7 +21,7 @@ <h1 class="heading-medium" id="example-conditional-errors">
         <input class="form-control" name="example-paid-weekly-pay" type="text" id="example-paid-weekly-pay">
       </div>
 
-      <label class="block-label" data-target="paid-fortnightly" for="example-paid-fortnightly">
+      <label class="block-label selection-button-radio" data-target="paid-fortnightly" for="example-paid-fortnightly">
         <input type="radio" name="radio-income-group" value="Yes" id="example-paid-fortnightly">
         Fortnightly
       </label>
@@ -30,7 +30,7 @@ <h1 class="heading-medium" id="example-conditional-errors">
         <input class="form-control" name="example-paid-fortnightly-pay" type="text" id="example-paid-fortnightly-pay">
       </div>
 
-      <label class="block-label" data-target="paid-monthly" for="example-paid-monthly">
+      <label class="block-label selection-button-radio" data-target="paid-monthly" for="example-paid-monthly">
         <input type="radio" name="radio-income-group" value="Yes" id="example-paid-monthly">
         Monthly
       </label>
@@ -56,7 +56,7 @@ <h1 class="heading-medium" id="example-conditional-errors-2">
         <span class="form-label-bold">How often do you get paid?</span>
       </legend>
 
-      <label class="block-label" data-target="paid-weekly-2" for="example-paid-weekly-2">
+      <label class="block-label selection-button-radio" data-target="paid-weekly-2" for="example-paid-weekly-2">
         <input type="radio" name="radio-income-group-2" value="Yes" id="example-paid-weekly-2">
         Weekly
       </label>
@@ -65,7 +65,7 @@ <h1 class="heading-medium" id="example-conditional-errors-2">
         <input class="form-control" name="example-paid-weekly-pay-2" type="text" id="example-paid-weekly-pay-2">
       </div>
 
-      <label class="block-label" data-target="paid-fortnightly-2" for="example-paid-fortnightly-2">
+      <label class="block-label selection-button-radio" data-target="paid-fortnightly-2" for="example-paid-fortnightly-2">
         <input type="radio" name="radio-income-group-2" value="Yes" id="example-paid-fortnightly-2">
         Fortnightly
       </label>
@@ -74,7 +74,7 @@ <h1 class="heading-medium" id="example-conditional-errors-2">
         <input class="form-control" name="example-paid-fortnightly-pay-2" type="text" id="example-paid-fortnightly-pay-2">
       </div>
 
-      <label class="block-label" data-target="paid-monthly-2" for="example-paid-monthly-2">
+      <label class="block-label selection-button-radio" data-target="paid-monthly-2" for="example-paid-monthly-2">
         <input type="radio" name="radio-income-group-2" value="Yes" id="example-paid-monthly-2" checked="checked">
         Monthly
       </label>

diff --git a/app/views/snippets/form_radio_buttons.html b/app/views/snippets/form_radio_buttons.html
@@ -6,16 +6,16 @@ <h1 class="heading-medium">Where do you live?</h1>
 
       <legend class="visually-hidden">Where do you live?</legend>
 
-      <label class="block-label" for="radio-1">
+      <label class="block-label selection-button-radio" for="radio-1">
         <input id="radio-1" type="radio" name="radio-group" value="Northern Ireland">
         Northern Ireland
       </label>
-      <label class="block-label" for="radio-2">
+      <label class="block-label selection-button-radio" for="radio-2">
         <input id="radio-2" type="radio" name="radio-group" value="Isle of Man or the Channel Islands">
         Isle of Man or the Channel Islands
       </label>
       <p class="form-block">or</p>
-      <label class="block-label" for="radio-3">
+      <label class="block-label selection-button-radio" for="radio-3">
         <input id="radio-3" type="radio" name="radio-group" value="I am a British citizen living abroad">
         I am a British citizen living abroad
       </label>

diff --git a/app/views/snippets/form_radio_buttons_inline.html b/app/views/snippets/form_radio_buttons_inline.html
@@ -8,11 +8,11 @@ <h1 class="heading-medium">
 
       <legend class="visually-hidden">Do you already have a personal user account?</legend>
 
-      <label class="block-label" for="radio-inline-1">
+      <label class="block-label selection-button-radio" for="radio-inline-1">
         <input id="radio-inline-1" type="radio" name="radio-inline-group" value="Yes">
         Yes
       </label>
-      <label class="block-label" for="radio-inline-2">
+      <label class="block-label selection-button-radio" for="radio-inline-2">
         <input id="radio-inline-2" type="radio" name="radio-inline-group" value="No">
         No
       </label>

diff --git a/app/views/snippets/form_radio_inline_yes_no.html b/app/views/snippets/form_radio_inline_yes_no.html
@@ -8,11 +8,11 @@ <h1 class="heading-medium">
 
       <legend class="visually-hidden">Do you yes/no?</legend>
 
-      <label class="block-label" data-target="yes-and-do-next" for="radio-yes-no-yes">
+      <label class="block-label selection-button-radio" data-target="yes-and-do-next" for="radio-yes-no-yes">
         <input id="radio-yes-no-yes" type="radio" name="yes-no-group" value="Yes">
         Yes
       </label>
-      <label class="block-label" data-target="no-and-do-next" for="radio-yes-no-no">
+      <label class="block-label selection-button-radio" data-target="no-and-do-next" for="radio-yes-no-no">
         <input id="radio-yes-no-no" type="radio" name="yes-no-group" value="No">
         No
       </label>