Checkboxes and radios

This List View extention allows you to create groups of checkbox and radio inputs.

Checkboxes group

Let's look at checkbox inputs group layout:

<div class="list-block">
  <ul>
    <!-- Single chekbox item -->
    <li>
      <label class="label-checkbox item-content">
        <!-- Checked by default -->
        <input type="checkbox" name="my-checkbox" value="Books" checked="checked">
        <div class="item-media">
          <i class="icon icon-form-checkbox"></i>
        </div>
        <div class="item-inner">
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <!-- Another chekbox item -->
    <li>
      <label class="label-checkbox item-content">
        <input type="checkbox" name="my-checkbox" value="Movies">
        <div class="item-media">
          <i class="icon icon-form-checkbox"></i>
        </div>
        <div class="item-inner">
          <div class="item-title">Movies</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>            

  • "item-content" should be a <label> element with additional "label-checkbox" class.

  • Checkbox (<input type="checkbox">) must be a first child of "item-content"

  • Checkbox icon must be in "item-media"

Radios group iOS

Let's look at radio inputs group layout:

<div class="list-block">
  <ul>
    <!-- Single radio input -->
    <li>
      <label class="label-radio item-content">
        <!-- Checked by default -->
        <input type="radio" name="my-radio" value="Books" checked="checked">
        <div class="item-inner">
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <!-- Another radio input -->
    <li>
      <label class="label-radio item-content">
        <input type="radio" name="my-radio" value="Movies">
        <div class="item-inner">
          <div class="item-title">Movies</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>                       

  • "item-content" should be a <label> element with additional "label-radio" class.

  • Radio input (<input type="radio">) must be a first child of "item-content"

Radios group Material

Note that in Material theme you'll have to add additional icon for Radios:

<div class="list-block">
  <ul>
    <!-- Single radio input -->
    <li>
      <label class="label-radio item-content">
        <!-- Checked by default -->
        <input type="radio" name="my-radio" value="Books" checked="checked">
        <div class="item-media">
          <i class="icon icon-form-radio"></i>
        </div>
        <div class="item-inner">
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <!-- Another radio input -->
    <li>
      <label class="label-radio item-content">
        <input type="radio" name="my-radio" value="Movies">
        <div class="item-media">
          <i class="icon icon-form-radio"></i>
        </div>
        <div class="item-inner">
          <div class="item-title">Movies</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>    

With media list view

You can use checkboxes and radios groups with media list view:

<div class="content-block-title">Select Message</div>
<div class="list-block media-list">
  <ul>
    <li>
      <label class="label-checkbox item-content">
        <input type="checkbox" name="my-checkbox">
        <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
        <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 dolor sit amet...</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>
 
<div class="content-block-title">What is your favourite song?</div>
<div class="list-block media-list">
  <ul>
    <li>
      <label class="label-radio item-content">
        <input type="radio" name="my-radio" checked>
        <div class="item-media"><img src="..." width="80"></div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Yellow Submarine</div>
            <div class="item-after">$15</div>
          </div>
          <div class="item-subtitle">Beatles</div>
          <div class="item-text">Lorem ipsum dolor ...</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>