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

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  /* --f7-checkbox-active-color: var(--f7-theme-color); */
  --f7-checkbox-icon-color: #fff;
}
:root .theme-dark,
:root.theme-dark {
  --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3);
}
.ios {
  --f7-checkbox-size: 22px;
  --f7-checkbox-border-radius: 50%;
  --f7-checkbox-border-width: 1px;
  --f7-checkbox-inactive-color: #c7c7cc;
  --f7-checkbox-extra-margin: 0px;
}
.md {
  --f7-checkbox-size: 18px;
  --f7-checkbox-border-radius: 2px;
  --f7-checkbox-border-width: 2px;
  --f7-checkbox-inactive-color: #6d6d6d;
  --f7-checkbox-extra-margin: 22px;
}
.aurora {
  --f7-checkbox-size: 14px;
  --f7-checkbox-border-radius: 2px;
  --f7-checkbox-border-width: 1px;
  --f7-checkbox-inactive-color: #888;
  --f7-checkbox-extra-margin: 0px;
}

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>