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>