Core
Navigation / Router
Components
- Accordion / Collapsible
- Autocomplete
- Buttons
- Calendar / Datepicker
- Cards
- Chips / Tags
- Content Block
- Data Table
- Floating Action Button
- Forms
  - Form Elements
  - Checkboxes and Radios
  - Smart Select
  - Disabled Elements
  - Form Data
  - Form Storage
  - Ajax Form Submit
- Infinite Scroll
- Layout Grid
- Lazy Load
- List View (Table View)
  - List View
  - Contacts List
  - Media List View
  - Swipeout
  - Sortable List
  - Virtual List
- Modals / Overlays
  - Modal
  - Popup
  - Popover
  - Action Sheet
  - Login Screen
  - Picker Modal
- Messages
- Message Bar
- Navbars & Toolbars
  - Layout types
  - Navbar
  - Dynamic Navbar
  - Sub Navbar
  - Toolbar
  - Tab Bar
  - Hide Bars On Scroll
- Notifications
- Photo Browser
- Picker
- Preloader Indicator
- Progress Bar
- Pull to Refresh
- Search Bar
- Side Panels
- Status Bar overlay
- Swiper Slider
- Tabs
- Timeline
Icons
- Icons
- Framework7 Icons Cheatsheet
Styling
- Color Themes
- Hairlines
Template7
Fast Clicks
Utilities
- Device API
- Support API
Plugins API
- Plugins API
Custom Build
- Custom Build

Form elements

Form elements allow you to create flexible and beautiful Form layout. Form elements are just well known List View but with few extensions.

Single form element layout

Let's look at layout of single form element (form field):

<div class="list-block">
  <ul>
    ...
    <li>
      <div class="item-content">
        <div class="item-media">... icon here ...</div>
        <div class="item-inner">
          <div class="item-title label">Name</div>
          <div class="item-input">
              <input type="text" name="name">
          </div>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

As you may see it is alsmost the same as usual List View layout but with few changes:

item-title - single-line form element label. Should have additional "label" class. Optional element
item-input - just contains your form input HTML element. Required element

With floating labels (Material Theme Only):

<div class="list-block">
  <ul>
    ...
    <li>
      <div class="item-content">
        <div class="item-media">... icon here ...</div>
        <div class="item-inner">
          <div class="item-title floating-label">Name</div>
          <div class="item-input">
              <input type="text" name="name">
          </div>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

Supported form elements

Here are the list of form elements that you can put inside of item-input:

All text inputs	Supported types: text, password, email, tel, url, date, number, datetime-local `... <div class="item-input"> <input type="text"> </div> ...` `... <div class="item-input"> <input type="email"> </div> ...`
Select	`... <div class="item-input"> <select>...</select"> </div> ...`
Textarea	`... <div class="item-input"> <textarea></textarea> </div> ...` Note that List View element with textarea should have additional "align-top" class on <li>: `<div class="list-block"> <ul> ... <!-- Additional "align-top" class for correct textarea alignment --> <li class="align-top"> <div class="item-content"> <div class="item-inner"> <div class="item-title label">Textarea</div> <div class="item-input"> <textarea></textarea> </div> </div> </div> </li> ... </ul> </div>`
Resizable Textarea	Resiable textarea. Just add "resizable" class to textarea and it will resize automatically depending on its content `... <div class="item-input"> <textarea class="resizable"></textarea> </div> ...`
Switch (Checkbox)	Switch (Checkbox) requires additional wrapper: `... <label class="label-switch"> <input type="checkbox"> <div class="checkbox"></div> </label> ...`
Slider (Range input)	Slider (Range input) requires additional wrapper: `... <div class="item-input"> <div class="range-slider"> <input type="range" min="0" max="100" step="0.1"> </div> </div> ...`

Examples

Full Layout

Note that the following example uses Framework7 Icons font

<div class="content-block-title">Full Layout</div>
<div class="list-block">
  <ul>
    <!-- Text inputs -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">person</i></div>
        <div class="item-inner">
          <div class="item-title label">Name</div>
          <div class="item-input">
            <input type="text" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">email</i></div>
        <div class="item-inner">
          <div class="item-title label">E-mail</div>
          <div class="item-input">
            <input type="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
    ...
    <!-- Select -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">persons</i></div>
        <div class="item-inner">
          <div class="item-title label">Gender</div>
          <div class="item-input">
            <select>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <!-- Date -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">calendar</i></div>
        <div class="item-inner">
          <div class="item-title label">Birth date</div>
          <div class="item-input">
            <input type="date" placeholder="Birth day" value="2014-04-30">
          </div>
        </div>
      </div>
    </li>
    <!-- Date time-->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">calendar</i></div>
        <div class="item-inner">
          <div class="item-title label">Date time</div>
          <div class="item-input">
            <input type="datetime-local">
          </div>
        </div>
      </div>
    </li>
    <!-- Switch (Checkbox) -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">check</i></div>
        <div class="item-inner">
          <div class="item-title label">Switch</div>
          <div class="item-input">
            <label class="label-switch">
              <input type="checkbox">
              <div class="checkbox"></div>
            </label>
          </div>
        </div>
      </div>
    </li>
    <!-- Slider (Range input) -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">filter</i></div>
        <div class="item-inner">
          <div class="item-title label">Slider</div>
          <div class="item-input">
            <div class="range-slider">
              <input type="range" min="0" max="100" value="50" step="0.1">
            </div>
          </div>
        </div>
      </div>
    </li>
    <!-- Textarea -->
    <li class="align-top">
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">chat</i></div>
        <div class="item-inner">
          <div class="item-title label">Textarea</div>
          <div class="item-input">
            <textarea></textarea>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Icons and inputs

Note that the following example uses Framework7 Icons font

Because item-title is optional element, we can drop elements labels:

<div class="content-block-title">Icons and inputs</div>
<div class="list-block">
  <ul>
    <!-- Text inputs -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">person</i></div>
        <div class="item-inner">
          <div class="item-input">
            <input type="text" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">email</i></div>
        <div class="item-inner">
          <div class="item-input">
            <input type="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
 
    <!-- Select -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">persons</i></div>
        <div class="item-inner">
          <div class="item-input">
            <select>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
 
    <!-- Date -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">calendar</i></div>
        <div class="item-inner">
          <div class="item-input">
            <input type="date" placeholder="Birth day" value="2014-04-30">
          </div>
        </div>
      </div>
    </li>
 
    <!-- Switch (Checkbox) -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">check</i></div>
        <div class="item-inner">
          <div class="item-input">
            <label class="label-switch">
              <input type="checkbox">
              <div class="checkbox"></div>
            </label>
          </div>
        </div>
      </div>
    </li>
 
    <!-- Slider (Range input) -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">filter</i></div>
        <div class="item-inner">
          <div class="item-input">
            <div class="range-slider">
              <input type="range" min="0" max="100" value="50" step="0.1">
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Labels and inputs

Because item-media is optional element, we can drop elements icons:

<div class="content-block-title">Labels and inputs</div>
<div class="list-block">
  <ul>
    <!-- Text inputs -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Name</div>
          <div class="item-input">
            <input type="text" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">E-mail</div>
          <div class="item-input">
            <input type="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
 
    <!-- Select -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Gender</div>
          <div class="item-input">
            <select>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
 
    <!-- Date -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Birth date</div>
          <div class="item-input">
            <input type="date" placeholder="Birth day" value="2014-04-30">
          </div>
        </div>
      </div>
    </li>
 
    <!-- Switch (Checkbox) -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Switch</div>
          <div class="item-input">
            <label class="label-switch">
              <input type="checkbox">
              <div class="checkbox"></div>
            </label>
          </div>
        </div>
      </div>
    </li>
 
    <!-- Slider (Range input) -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Slider</div>
          <div class="item-input">
            <div class="range-slider">
              <input type="range" min="0" max="100" value="50" step="0.1">
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Just inputs

Sometimes we need just inputs, so we can drop item-media and item-title

<div class="content-block-title">Just inputs</div>
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="text" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <select>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="date" placeholder="Birth day" value="2014-04-30">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Inset

And because form elements is a List View, we can make it inset:

<div class="content-block-title">Just inputs</div>
<!-- "inset" class on list-block -->
<div class="list-block inset">
  ...
</div>