SponsorsBecome a sponsor

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

Indeterminate State

Framework7 comes with visual support for indeterminate checkbox state.

In HTML it is not possible to set this state with attribute, it can be set only via JavaScript:

<input type="checkbox" id="my-checkbox" />
var checkboxEl = document.querySelector('#my-checkbox');
checkboxEl.indeterminate = true;

Or with Dom7

var $checkboxEl = $('#my-checkbox');
$checkboxEl.prop('indeterminate', true);

But if you use it with Router Component then it will automatically detect this attribute and set it as element property, so it can be used in templates:

<input type="checkbox" {{#if something}}indeterminate{{/if}} id="my-checkbox" />

Checkbox Icon Position

By default checkbox list item icon is displayed in the beginning of the list item.

And it is possible to override this behavior to specify position of checkbox list item icon - in the beginning or in the end of the list item.

To do this, we need to add additional item-checkbox-icon-start or item-checkbox-icon-end class to item-checkbox:

<!-- Additional "item-checkbox-icon-end" class will force checkbox icon to appear in the beginning of the list item for all themes -->
<li>
  <!-- Additional "item-checkbox-icon-end" class -->
  <label class="item-checkbox item-checkbox-icon-end 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>

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;
  --f7-checkbox-extra-margin: 0px;
}
:root .dark,
:root.dark {
  --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3);
  --f7-checkbox-icon-color: #000;
}
.ios {
  --f7-checkbox-size: 22px;
  --f7-checkbox-border-radius: 50%;
  --f7-checkbox-border-width: 1px;
  --f7-checkbox-inactive-color: #c7c7cc;
}
.md {
  --f7-checkbox-size: 18px;
  --f7-checkbox-border-radius: 2px;
  --f7-checkbox-border-width: 2px;
  --f7-checkbox-inactive-color: #6d6d6d;
}

Examples

checkbox.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Checkbox</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Inline</div>
      <div class="block block-strong-ios block-outline-ios">
        <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>
      <div class="block-title">Checkbox Group</div>
      <div class="list list-strong-ios list-outline-ios list-dividers-ios">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" value="Books" 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-checkbox-icon-start 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-checkbox-icon-start 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-checkbox-icon-start 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>

      <div class="list list-strong-ios list-outline-ios list-dividers-ios">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-end item-content">
              <input type="checkbox" name="demo-checkbox" value="Books" 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-checkbox-icon-end 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-checkbox-icon-end 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-checkbox-icon-end 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>

      <div class="block-title">Indeterminate State</div>
      <div class="list list-strong-ios list-outline-ios list-dividers-ios">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" checked=${movies.length===2}
                indeterminate=${movies.length===1} @change=${onMoviesChange} />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Movies</div>
              </div>
            </label>
            <ul>
              <li>
                <label class="item-checkbox item-checkbox-icon-start item-content">
                  <input type="checkbox" name="demo-checkbox" value="Movie 1" checked=${movies.indexOf('Movie 1')>= 0}
                  @change=${onMovieChange}
                  />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title">Movie 1</div>
                  </div>
                </label>
              </li>
              <li>
                <label class="item-checkbox item-checkbox-icon-start item-content">
                  <input type="checkbox" name="demo-checkbox" value="Movie 2" checked=${movies.indexOf('Movie 2')>= 0}
                  @change=${onMovieChange}
                  />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title">Movie 2</div>
                  </div>
                </label>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="block-title">With Media Lists</div>
      <div class="list list-strong-ios list-outline-ios list-dividers-ios media-list">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-start 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 dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                  turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                  amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                  vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-start 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 dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                  turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                  amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                  vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-start 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 dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                  turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                  amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                  vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-start 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 dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                  turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                  amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                  vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    let movies = ['Movie 1'];

    const onMovieChange = (e) => {
      var value = e.target.value;
      if (e.target.checked) {
        movies.push(value);
      } else {
        movies.splice(movies.indexOf(value), 1);
      }
      $update();
    }
    const onMoviesChange = (e) => {
      if (movies.length === 1 || movies.length === 0) {
        movies = ['Movie 1', 'Movie 2'];
      } else if (movies.length === 2) {
        movies = [];
      }
      $update();
    }

    return $render;
  };
</script>
Improve this Doc
On this page