Checkbox

Checkbox Layout

Checkbox layout is pretty simple:

<!-- checkbox element -->
<label class="checkbox">
  <!-- checkbox input -->
  <input type="checkbox">
  <!-- checkbox icon -->
  <i class="icon-checkbox"></i>
</label>

Checkbox Group/List

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

<div class="list">
  <ul>
    <!-- Single checkbox item -->
    <li>
      <label class="item-checkbox item-content">
        <!-- Checkbox input -->
        <input type="checkbox"/>
        <!-- Checkbox icon -->
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <!-- Checkbox Title -->
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <!-- Another checkbox item -->
    <li>
      <label class="item-checkbox item-content">
        <!-- Checked by default -->
        <input type="checkbox" checked/>
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Music</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</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

<div class="block block-strong">
  <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>
</div>

Checkbox Group

<div class="list">
  <ul>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="demo-checkbox" value="Books" checked="checked"/>
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="demo-checkbox" value="Movies"/>
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Movies</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="demo-checkbox" value="Food"/>
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Food</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="demo-checkbox" value="Drinks"/>
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Drinks</div>
        </div>
      </label>
    </li>
  </ul>
</div>

With Media Lists

<div class="list media-list">
  <ul>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="demo-media-checkbox" value="1"/>
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Facebook</div>
            <div class="item-after">17:14</div>
          </div>
          <div class="item-subtitle">New messages from John Doe</div>
          <div class="item-text">Lorem ipsum...</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="demo-media-checkbox" value="2"/>
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">John Doe (via Twitter)</div>
            <div class="item-after">17:11</div>
          </div>
          <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
          <div class="item-text">Lorem ipsum...</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="demo-media-checkbox" value="3"/>
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Facebook</div>
            <div class="item-after">16:48</div>
          </div>
          <div class="item-subtitle">New messages from John Doe</div>
          <div class="item-text">Lorem ipsum...</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="demo-media-checkbox" value="4"/>
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">John Doe (via Twitter)</div>
            <div class="item-after">15:32</div>
          </div>
          <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
          <div class="item-text">Lorem ipsum...</div>
        </div>
      </label>
    </li>
  </ul>
</div>