Inputs / Form Inputs
- Inputs Layout
- Supported Inputs
- Resizable Textarea
- Validation
- Input State Classes
- Input App Parameters
- Input App Methods
- Input Events
- CSS Variables
- Examples
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 onitem-content
. Required for correct input item layoutitem-label
- additional class onitem-title
required to display label correctlyitem-input-wrap
- required additional input wrapper. Must be a direct child ofitem-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 inputs | Supported types: text , password , email , tel , url , date , number , datetime-local
|
Select |
|
Textarea |
|
Range Slider |
|
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 valueinput-focused
- will be added to input when it is focusedinput-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 valueitem-input-focused
- will be added to input item when its input is focuseditem-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
|
app.input.focus(inputEl) | Will add additional required styles and classes on input like when it is focused
|
app.input.blur(inputEl) | Will remove additional required styles and classes on input like when it loses focus
|
app.input.resizeTextarea(textareaEl) | Force resizable textarea to resize depending on its content
|
app.input.checkEmptyState(inputEl) | Recalculate required additional styles and classes on input element based on whether it has value or not
|
app.input.validate(inputEl) | Validate input
|
app.input.validateInputs(containerEl) | Validate all inputs in passed container
|
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-line-height: 1.3;
--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-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);
*/
--f7-input-outline-border-color: #999;
}
:root .theme-dark,
:root.theme-dark {
--f7-input-outline-border-color: #444;
}
.ios {
--f7-input-height: 44px;
--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-clear-button-size: 14px;
--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);
}
.ios .theme-dark,
.ios.theme-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);
}
.md {
--f7-input-height: 36px;
--f7-input-font-size: 16px;
--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-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-clear-button-size: 18px;
--f7-input-clear-button-color: #aaa;
--f7-input-text-color: #212121;
--f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
--f7-label-text-color: rgba(0, 0, 0, 0.65);
--f7-input-info-text-color: rgba(0, 0, 0, 0.45);
}
.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.45);
}
.aurora {
--f7-input-height: 24px;
--f7-input-font-size: 13px;
--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-clear-button-size: 14px;
--f7-input-outline-height: 32px;
--f7-input-outline-padding-horizontal: 8px;
--f7-input-text-color: #000000;
--f7-input-placeholder-color: rgba(0, 0, 0, 0.32);
--f7-input-clear-button-color: #666;
--f7-input-info-text-color: rgba(0, 0, 0, 0.5);
}
.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);
--f7-input-info-text-color: rgba(255, 255, 255, 0.45);
}
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>
<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>
<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>