Checkbox

    Checkbox layout is pretty simple:

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

    2.   <ul>
    3.     <!-- Single checkbox item -->
    4.     <li>
    5.       <label class="item-checkbox item-content">
    6.         <!-- Checkbox input -->
    7.         <input type="checkbox"/>
    8.         <!-- Checkbox icon -->
    9.         <i class="icon icon-checkbox"></i>
    10.         <div class="item-inner">
    11.           <!-- Checkbox Title -->
    12.           <div class="item-title">Books</div>
    13.         </div>
    14.       </label>
    15.     </li>
    16.     <!-- Another checkbox item -->
    17.     <li>
    18.       <label class="item-checkbox item-content">
    19.         <!-- Checked by default -->
    20.         <input type="checkbox" checked/>
    21.         <i class="icon icon-checkbox"></i>
    22.         <div class="item-inner">
    23.           <div class="item-title">Music</div>
    24.         </div>
    25.       </label>
    26.     </li>
    27.     ...
    28.   </ul>
    29. </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

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

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

    Or with Dom7

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

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

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

    1. :root {
    2.   /* --f7-checkbox-active-color: var(--f7-theme-color); */
    3.   --f7-checkbox-icon-color: #fff;
    4. }
    5. :root .theme-dark,
    6. :root.theme-dark {
    7.   --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3);
    8. }
    9. .ios {
    10.   --f7-checkbox-size: 22px;
    11.   --f7-checkbox-border-radius: 50%;
    12.   --f7-checkbox-border-width: 1px;
    13.   --f7-checkbox-inactive-color: #c7c7cc;
    14.   --f7-checkbox-extra-margin: 0px;
    15. }
    16. .md {
    17.   --f7-checkbox-size: 18px;
    18.   --f7-checkbox-border-radius: 2px;
    19.   --f7-checkbox-border-width: 2px;
    20.   --f7-checkbox-extra-margin: 22px;
    21. }
    22. .aurora {
    23.   --f7-checkbox-size: 14px;
    25.   --f7-checkbox-border-width: 1px;
    26.   --f7-checkbox-inactive-color: #888;
    27.   --f7-checkbox-extra-margin: 0px;
    28. }

    Inline

    1. <div class="block block-strong">
    2.   <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>
    3. </div>

    Checkbox Group

    Indeterminate State

    1. <div class="list">
    2.   <ul>
    3.     <li>
    4.       <label class="item-checkbox item-content">
    5.         <input type="checkbox" name="demo-checkbox-movies" />
    6.         <i class="icon icon-checkbox"></i>
    7.         <div class="item-inner">
    8.           <div class="item-title">Movies</div>
    9.         </div>
    10.       </label>
    11.       <ul>
    12.         <li>
    13.           <label class="item-checkbox item-content">
    14.             <input type="checkbox" name="demo-checkbox-movie" value="Movie 1"/>
    15.             <i class="icon icon-checkbox"></i>
    16.             <div class="item-inner">
    17.               <div class="item-title">Movie 1</div>
    18.             </div>
    19.           </label>
    20.         </li>
    21.         <li>
    22.           <label class="item-checkbox item-content">
    23.             <input type="checkbox" name="demo-checkbox-movie" value="Movie 2"/>
    24.             <i class="icon icon-checkbox"></i>
    25.             <div class="item-inner">
    26.               <div class="item-title">Movie 2</div>
    27.             </div>
    28.           </label>
    29.         </li>
    30.       </ul>
    31.     </li>
    32.   </ul>
    33. </div>
    1. var $ = Dom7;
    3. // Child checkbox change
    4. $('[name="demo-checkbox-movie"]').on('change', function (e) {
    5.   var totalChecked = $('[name="demo-checkbox-movie"]:checked').length;
    6.   if (totalChecked === 0) {
    7.     $('[name="demo-checkbox-movies"]').prop('checked', false);
    8.   } else if (totalChecked === 2) {
    9.     $('[name="demo-checkbox-movies"]').prop('checked', true);
    10.   }
    11.   if (totalChecked === 1) {
    12.     $('[name="demo-checkbox-movies"]').prop('indeterminate', true);
    13.   } else {
    14.     $('[name="demo-checkbox-movies"]').prop('indeterminate', false);
    15.   }
    16. });
    18. // Parent checkbox change
    19. $('[name="demo-checkbox-movies"]').on('change', function (e) {
    20.     $('[name="demo-checkbox-movie"]').prop('checked', true);
    22.     $('[name="demo-checkbox-movie"]').prop('checked', false);
    23.   }
    24. });

    With Media Lists

    1. <div class="list media-list">
    2.   <ul>
    3.     <li>
    4.       <label class="item-checkbox item-content">
    5.         <input type="checkbox" name="demo-media-checkbox" value="1"/>
    6.         <i class="icon icon-checkbox"></i>
    7.         <div class="item-inner">
    8.           <div class="item-title-row">
    9.             <div class="item-title">Facebook</div>
    10.             <div class="item-after">17:14</div>
    11.           </div>
    12.           <div class="item-subtitle">New messages from John Doe</div>
    13.           <div class="item-text">Lorem ipsum...</div>
    14.         </div>
    15.       </label>
    16.     </li>
    17.     <li>
    18.       <label class="item-checkbox item-content">
    19.         <input type="checkbox" name="demo-media-checkbox" value="2"/>
    20.         <i class="icon icon-checkbox"></i>
    21.         <div class="item-inner">
    22.           <div class="item-title-row">
    23.             <div class="item-title">John Doe (via Twitter)</div>
    24.             <div class="item-after">17:11</div>
    25.           </div>
    26.           <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
    27.           <div class="item-text">Lorem ipsum...</div>
    28.         </div>
    29.       </label>
    30.     </li>
    31.     <li>
    32.       <label class="item-checkbox item-content">
    33.         <input type="checkbox" name="demo-media-checkbox" value="3"/>
    34.         <i class="icon icon-checkbox"></i>
    35.         <div class="item-inner">
    36.           <div class="item-title-row">
    37.             <div class="item-title">Facebook</div>
    38.             <div class="item-after">16:48</div>
    39.           </div>
    40.           <div class="item-subtitle">New messages from John Doe</div>
    41.           <div class="item-text">Lorem ipsum...</div>
    42.         </div>
    43.       </label>
    44.     </li>
    45.     <li>
    46.       <label class="item-checkbox item-content">
    47.         <input type="checkbox" name="demo-media-checkbox" value="4"/>
    48.         <i class="icon icon-checkbox"></i>
    49.         <div class="item-inner">
    50.           <div class="item-title-row">
    51.             <div class="item-title">John Doe (via Twitter)</div>
    52.             <div class="item-after">15:32</div>
    53.           </div>
    54.           <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
    55.           <div class="item-text">Lorem ipsum...</div>
    56.         </div>
    57.       </label>
    58.     </li>