Get Started
Events
- Events
Router / Navigation
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Elevation
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Video Intelligence (vi)
- View / Router
- Virtual List
Framework7 Icons
- Framework7 Icons Cheatsheet
Styling
Dom7
- Dom7
Template7
- Template7
Fast Clicks
Utilities
- Request / Ajax
- Utils
- Device
- Support
Plugins API
- Plugins API
Lazy Modules
- Lazy Modules
Custom Build
- Custom Build

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>