Inputs / Form Inputs

Form inputs allow you to create flexible and beautiful Form layouts.

Inputs Layout

It is recommended to use inputs with List View:

<div class="list">
  <ul>
    ...
    <li class="item-content item-input">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

Where:

item-input - required additional class on item-content. Required for correct input item layout
item-label - additional class on item-title required to display label correctly
item-input-wrap - required additional input wrapper. Must be a direct child of item-inner
<span class="input-clear-button"> - button that will clear input value in click. Optional

Stacked Labels

By default inputs list is displayed with stacked labels. Stacked labels always appear on top of the input:

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

Where:

item-title item-label - input label

Floating Labels

To add floating label, we need to use item-floating-label class instead of item-label.

<div class="list">
  <ul>
    ...
    <li class="item-content item-input">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <!-- "item-floating-label" class on item title -->
        <div class="item-title item-floating-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

Outline Inputs

To make input "outline" (with border around input) we need to add item-input-outline class to main list input element:

<div class="list">
  <ul>
    ...
    <!-- additional "item-input-outline" class -->
    <li class="item-content item-input item-input-outline">
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

Item Info

It is also possible to additional information about form input:

<div class="list">
  <ul>
    ...
    <!-- additional "item-input-with-info" class on item -->
    <li class="item-content item-input item-input-with-info">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
          <!-- element with additional information -->
          <div class="item-input-info">Some information about input field</div>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

Where:

item-input-with-info - required additional class on input item
<div class="item-input-info">...</div> - element with additional information

It is also possible to indicate dropdown input (like select) with additional input-dropdown-wrap class. It will add small dropdown icon on the right (▼):

<div class="list">
  <ul>
    ...
    <li class="item-content item-input">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <!-- additional "input-dropdown-wrap" class -->
        <div class="item-input-wrap input-dropdown-wrap">
          <select>
            ...
          </select>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

Supported Inputs

Here is the list of input elements that you can put inside of item-input-wrap:

All text inputs	Supported types: `text`, `password`, `email`, `tel`, `url`, `date`, `number`, `datetime-local` `... <div class="item-input-wrap"> <input type="text" /> </div> ... ... <div class="item-input-wrap"> <input type="email" /> </div> ...`
Select	`... <div class="item-input-wrap"> <select>...</select"> </div> ...`
Textarea	`... <div class="item-input-wrap"> <textarea></textarea> </div> ...`
Range Slider	`... <div class="item-input-wrap"> <div class="range-slider"> <input type="range" min="0" max="100" step="0.1" /> </div> </div> ...`

Resizable Textarea

To make textarea automatically resize based on its content we may just add resizable class:

<textarea class="resizable"></textarea>

Validation

Framework7 supports HTML5 validation based on validity input property. With enabled validation, there will appear validation error messages in case of input has invalid value.

To enable validation we must add: required and validate attributes to the input element.

If we need input validation only on blur event, then we need to add data-validate-on-blur="true" attribute.

Value validation depends on input type. For example input type="email" will be validated to match email pattern, etc. It is default browser behavior. In case you want to add custom rule to validate input value, then it must be done using pattern input attribute:

<!-- default validation, check for value is not empty -->
<input type="text" placeholder="Your name" required validate />

<!-- default email validation, value must be email -->
<input type="email" placeholder="Your e-mail" required validate />

<!-- default url validation -->
<input type="url" placeholder="Your URL" required validate />

<!-- pattern validation, value must be "apple" or "banana" -->
<input type="text" required validate pattern="apple|banana" placeholder="Type 'apple' or 'banana'" />

<!-- pattern validation with custom error message, value must be numbers only -->
<input type="text" placeholder="Enter number" required validate pattern="[0-9]*" data-error-message="Only numbers please!" />

<!-- this input will be validated only on blur -->
<input type="text" placeholder="Your name" required validate data-validate-on-blur="true" />

Input State Classes

There are several classes that can be added to input element depending on its state and content:

input-with-value - will be added to input when it has value
input-focused - will be added to input when it is focused
input-invalid - will be added to input when its value is not valid

Same states will be added to input's parent item-input element:

item-input-with-value - will be added to input item when its input has value
item-input-focused - will be added to input item when its input is focused
item-input-invalid - will be added to input item when its input's value is not valid

Input App Parameters

It is possible to control some default input behavior using global app parameters where we can pass input-related parameters under input property:

Parameter	Type	Default	Description
scrollIntoViewOnFocus	boolean		When enabled will scroll input into view on input focus. By default it is enabled for android devices only, as it helps to solve issue when on-screen keyboard may overlap the input
scrollIntoViewCentered	boolean	false	Tweaks behavior of previous parameter to scroll input into the center of view on input focus
scrollIntoViewDuration	number	0	Default duration for scrolling input into view
scrollIntoViewAlways	boolean	false	When enabled will scroll input into view no matter is it outside of view or not

For example:

var app = new Framework7({
  input: {
    scrollIntoViewOnFocus: true,
    scrollIntoViewCentered: true,
  }
});

Input App Methods

We can use following app methods available to control Inputs:

app.input.scrollIntoView(inputEl, duration, centered, force)	Scroll input into view inputEl - HTMLElement or string (with CSS Selector) of required input element to get into view. Required duration - number - scrolling duration in ms. centered - boolean - defines whether it must be scrolled into the center of view or not. force - boolean - scrolls input into view no matter is it outside of view or not.
app.input.focus(inputEl)	Will add additional required styles and classes on input like when it is focused inputEl - HTMLElement or string (with CSS Selector) of required input element. Required.
app.input.blur(inputEl)	Will remove additional required styles and classes on input like when it loses focus inputEl - HTMLElement or string (with CSS Selector) of required input element. Required.
app.input.resizeTextarea(textareaEl)	Force resizable textarea to resize depending on its content textareaEl - HTMLElement or string (with CSS Selector) of required textarea element. Required.
app.input.checkEmptyState(inputEl)	Recalculate required additional styles and classes on input element based on whether it has value or not inputEl - HTMLElement or string (with CSS Selector) of required textarea element. Required.
app.input.validate(inputEl)	Validate input inputEl - HTMLElement or string (with CSS Selector) of required textarea element. Required. Method returns `true` if input is valid, or `false` if input is not valid
app.input.validateInputs(containerEl)	Validate all inputs in passed container containerEl - HTMLElement or string (with CSS Selector) of required element with inputs inside to validate. Required. Method returns `true` if all child inputs are valid or `false` if at least one input is not valid

Input Events

Inputs will fire the following DOM events input elements:

Event	Target	Description
textarea:resize	Textarea Element<textarea class="resizable">	Event will be triggered after resizable textarea resized. `event.detail` will contain object with the `initialHeight`, `currentHeight` and `scrollHeight` properties
input:notempty	Input Element<input/textarea>	Event will be triggered when input value becomes not empty
input:empty	Input Element<input/textarea>	Event will be triggered when input value becomes empty
input:clear	Input Element<input/textarea>	Event will be triggered after input value will be cleared by clicking on input clear button

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-input-bg-color: transparent;
  --f7-label-font-weight: 400;
  --f7-label-height: 16px;
  --f7-label-font-size: 12px;
  --f7-floating-label-scale: calc(16 / 12);
  --f7-input-padding-left: 0px;
  --f7-input-padding-right: 0px;
  --f7-input-error-text-color: #ff3b30;
  --f7-input-error-font-size: 12px;
  --f7-input-error-line-height: 1.4;
  --f7-input-error-font-weight: 400;
  --f7-input-info-font-size: 12px;
  --f7-input-info-line-height: 1.4;
  --f7-textarea-height: 100px;
  /*
  --f7-input-outline-focused-border-color: var(--f7-theme-color);
  --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
  */
}
.ios {
  --f7-input-item-bg-color: transparent;
  --f7-input-item-border-radius: 0px;
  --f7-input-height: 40px;
  --f7-input-font-size: 16px;
  --f7-input-placeholder-color: #a9a9a9;
  --f7-textarea-padding-vertical: 8px;
  /*
  --f7-input-focused-border-color: var(--f7-list-item-border-color);
  --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  */
  --f7-label-text-color: inherit;
  /*
  --f7-label-focused-text-color: var(--f7-label-text-color);
  --f7-label-invalid-text-color: var(--f7-label-text-color);
  */
  --f7-input-clear-button-size: 14px;
  --f7-input-outline-border-radius: 8px;
  --f7-input-text-color: #000000;
  --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
  --f7-input-clear-button-color: rgba(0, 0, 0, 0.45);
  --f7-input-outline-border-color: #bbb;
}
.ios .dark,
.ios.dark {
  --f7-input-text-color: #fff;
  --f7-input-info-text-color: rgba(255, 255, 255, 0.55);
  --f7-input-clear-button-color: rgba(255, 255, 255, 0.5);
  --f7-input-outline-border-color: #444;
}
.md {
  --f7-input-item-border-radius: 4px 4px 0 0;
  --f7-input-height: 24px;
  --f7-input-font-size: 16px;
  --f7-textarea-padding-vertical: 0px;
  --f7-input-outline-border-radius: 4px;
  /*
  --f7-input-focused-border-color: var(--f7-theme-color);
  --f7-input-invalid-border-color: var(--f7-input-error-text-color);
  --f7-input-invalid-text-color: var(--f7-input-text-color);
  */
  /*
  --f7-label-focused-text-color: var(--f7-theme-color);
  --f7-label-invalid-text-color: var(--f7-input-error-text-color );
  */
  --f7-floating-label-scale: calc(16 / 12);
  --f7-input-clear-button-size: 24px;
  --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
}
.md .dark,
.md.dark {
  --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-input-placeholder-color: var(--f7-md-on-surface-variant);
  --f7-input-item-bg-color: var(--f7-md-surface-variant);
  --f7-input-border-color: var(--f7-md-outline);
  --f7-input-clear-button-color: var(--f7-md-on-surface-variant);
  --f7-input-outline-border-color: var(--f7-md-outline);
  --f7-input-text-color: var(--f7-md-on-surface);
  --f7-label-text-color: var(--f7-md-on-surface-variant);
}

Examples

inputs.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Form Inputs</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Full Layout / Stacked Labels</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Password</div>
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">E-mail</div>
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">URL</div>
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Phone</div>
            <div class="item-input-wrap">
              <input type="tel" placeholder="Your phone number">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Gender</div>
            <div class="item-input-wrap input-dropdown-wrap">
              <select placeholder="Please choose...">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
              </select>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Birthday</div>
            <div class="item-input-wrap">
              <input type="date" value="2014-04-30" placeholder="Please choose...">
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Date time</div>
            <div class="item-input-wrap">
              <input type="datetime-local" placeholder="Please choose...">
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Range</div>
            <div class="item-input-wrap">
              <div class="range-slider range-slider-init" data-label="true">
                <input type="range" value="50" min="0" max="100" step="1">
              </div>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Textarea</div>
            <div class="item-input-wrap">
              <textarea placeholder="Bio"></textarea>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Resizable</div>
            <div class="item-input-wrap">
              <textarea class="resizable" placeholder="Bio"></textarea>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Floating Labels</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Password</div>
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">E-mail</div>
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">URL</div>
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Phone</div>
            <div class="item-input-wrap">
              <input type="tel" placeholder="Your phone number">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Bio</div>
            <div class="item-input-wrap">
              <textarea class="resizable" placeholder="Bio"></textarea>
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Outline Inputs</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Password</div>
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">E-mail</div>
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">URL</div>
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Phone</div>
            <div class="item-input-wrap">
              <input type="tel" placeholder="Your phone number">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Bio</div>
            <div class="item-input-wrap">
              <textarea class="resizable" placeholder="Bio"></textarea>
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Floating Labels + Outline Inputs</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Password</div>
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">E-mail</div>
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">URL</div>
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Phone</div>
            <div class="item-input-wrap">
              <input type="tel" placeholder="Your phone number">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Bio</div>
            <div class="item-input-wrap">
              <textarea class="resizable" placeholder="Bio"></textarea>
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Validation + Additional Info</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input item-input-with-info">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name" required validate>
              <span class="input-clear-button"></span>
              <div class="item-input-info">Default "required" validation</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Fruit</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Type 'apple' or 'banana'" required validate pattern="apple|banana">
              <span class="input-clear-button"></span>
              <div class="item-input-info">Pattern validation (<b>apple|banana</b>)</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">E-mail</div>
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail" required validate>
              <span class="input-clear-button"></span>
              <div class="item-input-info">Default e-mail validation</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">URL</div>
            <div class="item-input-wrap">
              <input type="url" placeholder="Your URL" required validate>
              <span class="input-clear-button"></span>
              <div class="item-input-info">Default URL validation</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Number</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Enter number" required validate pattern="[0-9]*"
                data-error-message="Only numbers please!">
              <span class="input-clear-button"></span>
              <div class="item-input-info">With custom error message</div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Icon + Input</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Label + Input</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">Password</div>
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">E-mail</div>
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">URL</div>
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Only Inputs</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Inputs + Additional Info</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input item-input-with-info">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
              <div class="item-input-info">Full name please</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
              <div class="item-input-info">8 characters minimum</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
              <div class="item-input-info">Your work e-mail address</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
              <div class="item-input-info">Your website URL</div>
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</div>