5.2.4 #permalink input-blockLabel

Toggle example guides Toggle HTML markup

Style a radio array as a grid of images. Hide the input with grid-0, and let this css style the label. Includes hover and selected states. Should be a11y-friendly.

Example
Markup
<div class="grid-parent">
   <input
   	class="grid-0 input-blockLabel"
       type="radio"
       name="giftcardDesignsId"
       value="211"
       id="211"
       required
   />
   <label for="211" class="grid-4 box_padded2 input-blockLabel-label">
   	<img class="img-cover" src="/img/giftCards/2015/orange_thumbnail.png" alt="Orange"/>
   </label>
   <input
   	class="grid-0 input-blockLabel"
       type="radio"
       name="giftcardDesignsId"
       value="212"
       id="212"
       required
       checked="checked"
   />
   <label for="212" class="grid-4 box_padded2 input-blockLabel-label">
   	<img class="img-cover" src="/img/giftCards/2015/map_thumbnail.png" alt="Map"/>
   </label>
   <input
   	class="grid-0 input-blockLabel"
       type="radio"
       name="giftcardDesignsId"
       value="213"
       id="213"
       required
   />
   <label for="213" class="grid-4 box_padded2 input-blockLabel-label">
   	<img class="img-cover" src="/img/giftCards/2015/youre_awesome_thumbnail.png" alt="You're Awesome"/>
   </label>
</div>
Source: modules/05_user_interface/forms_ext.less, line 158