v4
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop

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

Inline Labels

If you want to use inline labels then you can additional inline-labels class to the whole list or inline-label class to the single item:

<div class="list inline-labels">
  <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>
<!-- or just to single item -->
<div class="list">
  <ul>
    ...
    <!-- additional "inline-label" class -->
    <li class="item-content item-input inline-label">
      ...
    </li>
    ...
  </ul>
</div>

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

Input Dropdown

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 inputsSupported 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-vaildate-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:

ParameterTypeDefaultDescription
scrollIntoViewOnFocusbooleanWhen 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
scrollIntoViewCenteredbooleanfalseTweaks behavior of previous parameter to scroll input into the center of view on input focus
scrollIntoViewDurationnumber0Default duration for scrolling input into view
scrollIntoViewAlwaysbooleanfalseWhen 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.
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.

Input Events

Inputs will fire the following DOM events input elements:

EventTargetDescription
textarea:resizeTextarea 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:notemptyInput Element<input/textarea>Event will be triggered when input value becomes not empty
input:emptyInput Element<input/textarea>Event will be triggered when input value becomes empty
input:clearInput 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-line-height: 1.2;
  --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-input-outline-height: 40px;
  --f7-input-outline-border-color: #999;
  --f7-input-outline-border-radius: 4px;
  --f7-input-outline-padding-horizontal: 12px;
  --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);
  */
}
:root .theme-dark,
:root.theme-dark {
  --f7-input-outline-border-color: #444;
}
.ios {
  --f7-input-height: 44px;
  --f7-input-text-color: #000000;
  --f7-input-font-size: 17px;
  --f7-input-placeholder-color: #a9a9a9;
  --f7-textarea-padding-vertical: 11px;
  /*
  --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-font-size: 12px;
  --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-floating-label-scale: calc(17 / 12);
  --f7-inline-label-font-size: 17px;
  --f7-inline-label-line-height: 1.4;
  --f7-inline-label-padding-top: 3px;
  --f7-input-info-text-color: #8e8e93;
  --f7-input-clear-button-size: 14px;
  --f7-input-clear-button-color: #8e8e93;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-input-text-color: #fff;
}
.md {
  --f7-input-height: 36px;
  --f7-input-text-color: #212121;
  --f7-input-font-size: 16px;
  --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
  --f7-textarea-padding-vertical: 7px;
  /*
  --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-font-size: 12px;
  --f7-label-text-color: rgba(0, 0, 0, 0.65);
  /*
  --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-inline-label-font-size: 16px;
  --f7-inline-label-line-height: 1.5;
  --f7-inline-label-padding-top: 7px;
  --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
  --f7-input-clear-button-size: 18px;
  --f7-input-clear-button-color: #aaa;
}
.md .theme-dark,
.md.theme-dark {
  --f7-input-text-color: rgba(255, 255, 255, 0.87);
  --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
  --f7-label-text-color: rgba(255, 255, 255, 0.54);
  --f7-input-info-text-color: rgba(255, 255, 255, 0.35);
}
.aurora {
  --f7-input-height: 24px;
  --f7-input-text-color: #000000;
  --f7-input-font-size: 13px;
  --f7-input-placeholder-color: rgba(0, 0, 0, 0.32);
  --f7-textarea-padding-vertical: 2px;
  /*
  --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-font-size: 11px;
  --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-floating-label-scale: calc(13 / 11);
  --f7-inline-label-font-size: 14px;
  --f7-inline-label-line-height: 1.4;
  --f7-inline-label-padding-top: 1px;
  --f7-input-info-text-color: rgba(0, 0, 0, 0.5);
  --f7-input-clear-button-size: 14px;
  --f7-input-clear-button-color: #666;
  --f7-input-outline-height: 32px;
  --f7-input-outline-padding-horizontal: 8px;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-input-text-color: #fff;
  --f7-input-clear-button-color: #aaa;
  --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
}

Examples

<div class="block-title">Full Layout / Inline Labels</div>
<div class="list inline-labels no-hairlines-md">
  <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">Full Layout / Stacked Labels</div>
<div class="list no-hairlines-md">
  <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 no-hairlines-md">
  <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">Floating Labels + Outline Inputs</div>
<div class="list no-hairlines-md">
  <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 no-hairlines-md">
  <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 no-hairlines-md">
  <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 no-hairlines-md">
  <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 no-hairlines-md">
  <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 no-hairlines-md">
  <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 class="block-title">Only Inputs Inset</div>
<div class="list inset">
  <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>