Checkbox - 图1

Checkbox

Checkbox Layout

Checkbox layout is pretty simple:

  1. <!-- checkbox element -->
  2. <label class="checkbox">
  3.   <!-- checkbox input -->
  4.   <input type="checkbox">
  5.   <!-- checkbox icon -->
  6.   <i class="icon-checkbox"></i>
  7. </label>

Checkbox Group/List

To create Checkbox group/list we need to use List View with few additions:

  1. <div class="list">
  2.   <ul>
  3.     <!-- Single checkbox item -->
  4.     <li>
  5.       <label class="item-checkbox item-content">
  6.         <!-- Checkbox input -->
  7.         <input type="checkbox"/>
  8.         <!-- Checkbox icon -->
  9.         <i class="icon icon-checkbox"></i>
  10.         <div class="item-inner">
  11.           <!-- Checkbox Title -->
  12.           <div class="item-title">Books</div>
  13.         </div>
  14.       </label>
  15.     </li>
  16.     <!-- Another checkbox item -->
  17.     <li>
  18.       <label class="item-checkbox item-content">
  19.         <!-- Checked by default -->
  20.         <input type="checkbox" checked/>
  21.         <i class="icon icon-checkbox"></i>
  22.         <div class="item-inner">
  23.           <div class="item-title">Music</div>
  24.         </div>
  25.       </label>
  26.     </li>
  27.     ...
  28.   </ul>
  29. </div>
  • item-content must be a **<label>** element with additional **item-checkbox** class
  • Checkbox input (<input type="checkbox">) must be a first child of item-content
  • Checkbox icon must be after checkbox input

Examples

Inline

  1. <div class="block block-strong">
  2.   <p>Lorem <label class="checkbox"><input type="checkbox"><i class="icon-checkbox"></i></label> ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi <label class="checkbox"><input type="checkbox"><i class="icon-checkbox"></i></label> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla mollitia!</p>
  3. </div>

Checkbox Group

  1. <div class="list">
  2.   <ul>
  3.     <li>
  4.       <label class="item-checkbox item-content">
  5.         <input type="checkbox" name="demo-checkbox" value="Books" checked="checked"/>
  6.         <i class="icon icon-checkbox"></i>
  7.         <div class="item-inner">
  8.           <div class="item-title">Books</div>
  9.         </div>
  10.       </label>
  11.     </li>
  12.     <li>
  13.       <label class="item-checkbox item-content">
  14.         <input type="checkbox" name="demo-checkbox" value="Movies"/>
  15.         <i class="icon icon-checkbox"></i>
  16.         <div class="item-inner">
  17.           <div class="item-title">Movies</div>
  18.         </div>
  19.       </label>
  20.     </li>
  21.     <li>
  22.       <label class="item-checkbox item-content">
  23.         <input type="checkbox" name="demo-checkbox" value="Food"/>
  24.         <i class="icon icon-checkbox"></i>
  25.         <div class="item-inner">
  26.           <div class="item-title">Food</div>
  27.         </div>
  28.       </label>
  29.     </li>
  30.     <li>
  31.       <label class="item-checkbox item-content">
  32.         <input type="checkbox" name="demo-checkbox" value="Drinks"/>
  33.         <i class="icon icon-checkbox"></i>
  34.         <div class="item-inner">
  35.           <div class="item-title">Drinks</div>
  36.         </div>
  37.       </label>
  38.     </li>
  39.   </ul>
  40. </div>

With Media Lists

  1. <div class="list media-list">
  2.   <ul>
  3.     <li>
  4.       <label class="item-checkbox item-content">
  5.         <input type="checkbox" name="demo-media-checkbox" value="1"/>
  6.         <i class="icon icon-checkbox"></i>
  7.         <div class="item-inner">
  8.           <div class="item-title-row">
  9.             <div class="item-title">Facebook</div>
  10.             <div class="item-after">17:14</div>
  11.           </div>
  12.           <div class="item-subtitle">New messages from John Doe</div>
  13.           <div class="item-text">Lorem ipsum...</div>
  14.         </div>
  15.       </label>
  16.     </li>
  17.     <li>
  18.       <label class="item-checkbox item-content">
  19.         <input type="checkbox" name="demo-media-checkbox" value="2"/>
  20.         <i class="icon icon-checkbox"></i>
  21.         <div class="item-inner">
  22.           <div class="item-title-row">
  23.             <div class="item-title">John Doe (via Twitter)</div>
  24.             <div class="item-after">17:11</div>
  25.           </div>
  26.           <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
  27.           <div class="item-text">Lorem ipsum...</div>
  28.         </div>
  29.       </label>
  30.     </li>
  31.     <li>
  32.       <label class="item-checkbox item-content">
  33.         <input type="checkbox" name="demo-media-checkbox" value="3"/>
  34.         <i class="icon icon-checkbox"></i>
  35.         <div class="item-inner">
  36.           <div class="item-title-row">
  37.             <div class="item-title">Facebook</div>
  38.             <div class="item-after">16:48</div>
  39.           </div>
  40.           <div class="item-subtitle">New messages from John Doe</div>
  41.           <div class="item-text">Lorem ipsum...</div>
  42.         </div>
  43.       </label>
  44.     </li>
  45.     <li>
  46.       <label class="item-checkbox item-content">
  47.         <input type="checkbox" name="demo-media-checkbox" value="4"/>
  48.         <i class="icon icon-checkbox"></i>
  49.         <div class="item-inner">
  50.           <div class="item-title-row">
  51.             <div class="item-title">John Doe (via Twitter)</div>
  52.             <div class="item-after">15:32</div>
  53.           </div>
  54.           <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
  55.           <div class="item-text">Lorem ipsum...</div>
  56.         </div>
  57.       </label>
  58.     </li>
  59.   </ul>
  60. </div>