Input / Form Elements Vue Components
Form elements allow you to create flexible and beautiful Form layout. Form elements are just well known List View (List and List Item Vue components) but with few additional components.
Check out Framework7's Inputs / Form Elements for their appearance.
Input Components
There are following components included:
f7-list-input
- list item input elementf7-input
- input element
Input Properties
Prop | Type | Default | Description |
---|---|---|---|
<f7-list-input> properties | |||
media | string | List item media image URL | |
label | string | Input's label text | |
inline-label | boolean | false | Makes label inline |
floating-label | boolean | false | Enables floating label |
outline | boolean | false | Makes input outline |
input | boolean | true | Whether it should render input element or not. Disable if you want to use custom input inside. |
type | string | Input type. All default HTML5 input type, and few special ones:
| |
resizable | boolean | false | Makes textarea resizable |
inputStyle | string object | Value of input's "style" attribute, in case you need to pass extra styles | |
clear-button | boolean | false | Adds input clear button that will clear input value on click |
validate | boolean | false | When enabled then input value will be validated on change based on passed "pattern" or based on input type. If you use custom validation and need more control on where to show/hide error message, then it is better to disable validation and use error-message together with error-message-force props. |
validate-on-blur | boolean | false | When enabled then input will be validated on blur only. |
onValidate | function | Callback to be executed on input validation, returns boolean value indication whether the input is valid or not.
| |
error-message | string | Custom error message to show when input value is invalid | |
error-message-force | boolean | false | Force error message to force. Useful in case you use custom validation and want to show/hide error message when you need it |
info | string | Custom additional text with information about input | |
name | string | Input name | |
placeholder | string | Input placeholder | |
id | string | Wrapping element ID attribute | |
input-id | string | Input element ID attribute | |
value | string number array object | Input value. If If If | |
default-value | string number | Input value, in case of uncontrolled component | |
inputmode | string | Value of input's native "inputmode" attribute | |
size | string number | Value of input's native "size" attribute | |
pattern | string | Value of input's native "pattern" attribute | |
accept | string number | Value of input's native "accept" attribute | |
autocomplete | string | Value of input's native "autocomplete" attribute | |
autofocus | boolean | false | Value of input's native "autofocus" attribute |
autosave | string | Value of input's native "autosave" attribute | |
disabled | boolean | false | Marks input as disabled |
max | string number | Value of input's native "max" attribute | |
min | string number | Value of input's native "min" attribute | |
step | string number | Value of input's native "step" attribute | |
maxlength | string number | Value of input's native "maxlength" attribute | |
minlength | string number | Value of input's native "minlength" attribute | |
multiple | boolean | false | Value of input's native "multiple" attribute |
readonly | boolean | false | Marks input as readonly |
required | boolean | false | Marks input as required |
tabindex | string number | Value of input's native "tabindex" attribute | |
no-store-data | boolean | false | Allows to ignore input value to be stored when using with Form Storage |
ignore-store-data | boolean | false | Same as previous |
wrap | boolean | true | When enabled it will be wrapped in <li> element |
calendar-params | object | Object with Calendar Parameters which is used when type="datepicker" | |
color-picker-params | object | Object with Color Picker Parameters which is used when type="colorpicker" | |
text-editor-params | object | Object with Text Editor Parameters which is used when type="texteditor" | |
<f7-input> properties | |||
outline | boolean | false | Makes input outline |
wrap | boolean | true | Defines should the input be wraped with <div class="input"> element or not. |
type | string | Input type. All default HTML5 input type, and few special ones:
| |
resizable | boolean | false | Makes textarea resizable |
inputStyle | string object | Value of input's "style" attribute, in case you need to pass extra styles | |
clear-button | boolean | false | Adds input clear button that will clear input value on click |
validate | boolean | false | When enabled then input value will be validated on change based on passed "pattern" or based on input type. If you use custom validation and need more control on where to show/hide error message, then it is better to disable validation and use error-message together with error-message-force props. |
validate-on-blur | boolean | false | When enabled then input will be validated on blur only. |
onValidate | function | Callback to be executed on input validation, returns boolean value indication whether the input is valid or not.
| |
error-message | string | Custom error message to show when input value is invalid | |
error-message-force | boolean | false | Force error message to force. Useful in case you use custom validation and want to show/hide error message when you need it |
info | string | Custom additional text with information about input | |
name | string | Input name | |
placeholder | string | Input placeholder | |
id | string | Wrapping element ID attribute | |
input-id | string | Input element ID attribute | |
value | string number | Input value. If If If | |
inputmode | string | Value of input's native "inputmode" attribute | |
size | string number | Value of input's native "size" attribute | |
pattern | string | Value of input's native "pattern" attribute | |
accept | string number | Value of input's native "accept" attribute | |
autocomplete | string | Value of input's native "autocomplete" attribute | |
autofocus | boolean | false | Value of input's native "autofocus" attribute |
autosave | string | Value of input's native "autosave" attribute | |
checked | boolean | false | Marks input as checked |
disabled | boolean | false | Marks input as disabled |
max | string number | Value of input's native "max" attribute | |
min | string number | Value of input's native "min" attribute | |
step | string number | Value of input's native "step" attribute | |
maxlength | string number | Value of input's native "maxlength" attribute | |
minlength | string number | Value of input's native "minlength" attribute | |
multiple | boolean | false | Value of input's native "multiple" attribute |
readonly | boolean | false | Marks input as readonly |
required | boolean | false | Marks input as required |
tabindex | string number | Value of input's native "tabindex" attribute | |
no-store-data | boolean | false | Allows to ignore input value to be stored when using with Form Storage |
ignore-store-data | boolean | false | Same as previous |
calendar-params | object | Object with Calendar Parameters which is used when type="datepicker" | |
color-picker-params | object | Object with Color Picker Parameters which is used when type="colorpicker" | |
text-editor-params | object | Object with Text Editor Parameters which is used when type="texteditor" |
Input Events
Event | Arguments | Description |
---|---|---|
<f7-list-input>, <f7-input> events | ||
focus | (event) | Fired when user focused to input. |
blur | (event) | Fired when user lost focus from input. |
input | (event) | Fired immediately when input value changed. Note: Input event triggers after beforeinput, keypress, keyup, keydown events. |
change | (event) | Fired on blur if value changed. |
input:clear | (event) | Fired when input clear button clicked |
textarea:resize | (event) | Fired if resizable textarea resized. event.detail will contain object with the initialHeight , currentHeight and scrollHeight properties |
input:empty | (event) | Fired when input value becomes empty |
input:notempty | (event) | Fired when input value becomes not empty |
calendar:change | (value) | Fired when type="datepicker" Calendar value changed. As an argument it receives array with selected dates. |
colorpicker:change | (value) | Fired when type="colorpicker" Color Picker value changed. As an argument it receives object with Color Picker value. |
texteditor:change | (value) | Fired when type="texteditor" Text Editor value changed. As an argument it receives Texteditor value (HTML string). |
Input Slots
<f7-list-input>
has additional slots for custom elements:
default
- in case oftype="select"
ortype="textarea"
- element will be placed inside ofselect
ortextarea
tags.info
- element will be inserted into container with info messageerror-message
- element will be inserted into container with error messagelabel
- element will be inserted into container with input's labelinput
- element will be inserted instead of input element (input
prop must be also set tofalse
)root-start
- element will be inserted in the beginning of<li>
elementroot
/root-end
- element will be inserted in the end of<li>
elementcontent-start
- element will be inserted in the beginning of<div class="item-content">
elementcontent
/content-end
- element will be inserted in the end of<div class="item-content">
elementinner-start
- element will be inserted in the beginning of<div class="item-inner">
elementinner
/inner-end
- element will be inserted in the end of<div class="item-inner">
elementmedia
- element will be inserted inside of<div class="item-media">
element
Input v-model
v-model
is not supported on f7-list-input
/ f7-input
vue components. Instead, just use the combination of value
property and @input
event:
<template>
...
<f7-list-input
label="Name"
type="text"
:value="name"
@input="name = $event.target.value"
placeholder="Your name"
clear-button
></f7-list-input>
...
</template>
<script>
export default {
data() {
name: '',
},
...
};
</script>
Examples
Full Layout / Inline Labels
<f7-list inline-labels no-hairlines-md>
<f7-list-input
label="Name"
type="text"
placeholder="Your name"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Password"
type="password"
placeholder="Your password"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="E-mail"
type="email"
placeholder="Your e-mail"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="URL"
type="url"
placeholder="URL"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Phone"
type="tel"
placeholder="Your phone number"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Gender"
type="select"
defaultValue="Male"
placeholder="Please choose..."
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<option value="Male">Male</option>
<option value="Female">Female</option>
</f7-list-input>
<f7-list-input
label="Birthday"
type="date"
defaultValue="2014-04-30"
placeholder="Please choose..."
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Date time"
type="datetime-local"
placeholder="Please choose..."
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Range"
:input="false"
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
</f7-list-input>
<f7-list-input
label="Textarea"
type="textarea"
placeholder="Bio"
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Resizable"
type="textarea"
resizable
placeholder="Bio"
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
</f7-list>
Full Layout / Stacked Labels
<f7-list no-hairlines-md>
<f7-list-input
label="Name"
type="text"
placeholder="Your name"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Password"
type="password"
placeholder="Your password"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="E-mail"
type="email"
placeholder="Your e-mail"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="URL"
type="url"
placeholder="URL"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Phone"
type="tel"
placeholder="Your phone number"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Gender"
type="select"
defaultValue="Male"
placeholder="Please choose..."
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<option value="Male">Male</option>
<option value="Female">Female</option>
</f7-list-input>
<f7-list-input
label="Birthday"
type="date"
defaultValue="2014-04-30"
placeholder="Please choose..."
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Date time"
type="datetime-local"
placeholder="Please choose..."
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Range"
:input="false"
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
</f7-list-input>
<f7-list-input
label="Textarea"
type="textarea"
placeholder="Bio"
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Resizable"
type="textarea"
resizable
placeholder="Bio"
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
</f7-list>
Date Pickers
<f7-list no-hairlines-md>
<f7-list-input
label="Default setup"
type="datepicker"
placeholder="Your birth date"
readonly
></f7-list-input>
<f7-list-input
label="Custom date format"
type="datepicker"
placeholder="Select date"
readonly
:calendar-params="{dateFormat: 'DD, MM dd, yyyy'}"
></f7-list-input>
<f7-list-input
label="Multiple Values"
type="datepicker"
placeholder="Select multiple dates"
readonly
:calendar-params="{ dateFormat: 'M dd yyyy', multiple: true }"
></f7-list-input>
<f7-list-input
label="Range Picker"
type="datepicker"
placeholder="Select date range"
readonly
:calendar-params="{ dateFormat: 'M dd yyyy', rangePicker: true }"
></f7-list-input>
<f7-list-input
label="Open in Modal"
type="datepicker"
placeholder="Select date"
readonly
:calendar-params="{openIn: 'customModal', header: true, footer: true, dateFormat: 'MM dd yyyy'}"
></f7-list-input>
</f7-list>
Color Pickers
<f7-list no-hairlines-md>
<f7-list-input
type="colorpicker"
label="Color Wheel"
placeholder="Color"
readonly
:value="{ hex: '#00ff00' }"
></f7-list-input>
<f7-list-input
type="colorpicker"
label="Saturation-Brightness Spectrum"
placeholder="Color"
readonly
:value="{ hex: '#ff0000' }"
:color-picker-params="{
modules: ['sb-spectrum', 'hue-slider'],
}"
></f7-list-input>
<f7-list-input
type="colorpicker"
label="RGB Sliders"
placeholder="Color"
readonly
:value="{ hex: '#0000ff' }"
:color-picker-params="{
modules: ['rgb-sliders'],
sliderValue: true,
sliderLabel: true,
}"
></f7-list-input>
<f7-list-input
type="colorpicker"
label="RGBA Sliders"
placeholder="Color"
readonly
:value="{ hex: '#ff00ff' }"
:color-picker-params="{
modules: ['rgb-sliders', 'alpha-slider'],
sliderValue: true,
sliderLabel: true,
formatValue(value) {
return `rgba(${value.rgba.join(', ')})`;
},
}"
></f7-list-input>
<f7-list-input
type="colorpicker"
label="HSB Sliders"
placeholder="Color"
readonly
:value="{ hex: '#00ff00' }"
:color-picker-params="{
modules: ['hsb-sliders'],
sliderValue: true,
sliderLabel: true,
formatValue(value) {
return `hsb(${value.hsb[0]}, ${value.hsb[1] * 1000 / 10}%, ${value.hsb[2] * 1000 / 10}%)`
},
}"
></f7-list-input>
<f7-list-input
type="colorpicker"
label="RGB Bars"
placeholder="Color"
readonly
:value="{ hex: '#0000ff' }"
:color-picker-params="{
modules: ['rgb-bars'],
openIn: 'auto',
barValue: true,
barLabel: true,
formatValue(value) {
return `rgb(${value.rgb.join(', ')})`;
},
}"
></f7-list-input>
<f7-list-input
type="colorpicker"
label="RGB Sliders + Colors"
placeholder="Color"
readonly
:value="{ hex: '#ffff00' }"
:color-picker-params="{
modules: ['initial-current-colors', 'rgb-sliders'],
sliderValue: true,
sliderLabel: true,
formatValue(value) {
return `rgb(${value.rgb.join(', ')})`;
},
}"
></f7-list-input>
<f7-list-input
type="colorpicker"
label="Palette"
placeholder="Color"
readonly
:value="{ hex: '#FFEBEE' }"
:color-picker-params="{
modules: ['palette'],
openIn: 'auto',
openInPhone: 'sheet',
palette: [
['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
],
formatValue(value) {
return value.hex;
},
}"
></f7-list-input>
<f7-list-input
type="colorpicker"
label="Pro Mode"
placeholder="Color"
readonly
:value="{ hex: '#00ffff' }"
:color-picker-params="{
modules: ['initial-current-colors', 'sb-spectrum', 'hsb-sliders', 'rgb-sliders', 'alpha-slider', 'hex', 'palette'],
openIn: 'auto',
sliderValue: true,
sliderValueEditable: true,
sliderLabel: true,
hexLabel: true,
hexValueEditable: true,
groupedModules: true,
palette: [
['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
],
formatValue(value) {
return `rgba(${value.rgba.join(', ')})`;
},
}"
></f7-list-input>
</f7-list>
Floating Labels
<f7-list no-hairlines-md>
<f7-list-input
label="Name"
floating-label
type="text"
placeholder="Your name"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Password"
floating-label
type="password"
placeholder="Your password"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="E-mail"
floating-label
type="email"
placeholder="Your e-mail"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="URL"
floating-label
type="url"
placeholder="URL"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Phone"
floating-label
type="tel"
placeholder="Your phone number"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Resizable"
floating-label
type="textarea"
resizable
placeholder="Bio"
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
</f7-list>
Floating Labels + Outline Inputs
<f7-list no-hairlines-md>
<f7-list-input
outline
label="Name"
floating-label
type="text"
placeholder="Your name"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
outline
label="Password"
floating-label
type="password"
placeholder="Your password"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
outline
label="E-mail"
floating-label
type="email"
placeholder="Your e-mail"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
outline
label="URL"
floating-label
type="url"
placeholder="URL"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
outline
label="Phone"
floating-label
type="tel"
placeholder="Your phone number"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
outline
label="Bio"
floating-label
type="textarea"
resizable
placeholder="Bio"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
</f7-list>
Validation + Additional Info
<f7-list no-hairlines-md>
<f7-list-input
label="Name"
type="text"
placeholder="Your name"
info="Default validation"
required
validate
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Fruit"
type="text"
placeholder="Type 'apple' or 'banana'"
required
validate
pattern="apple|banana"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<span slot="info">Pattern validation (<b>apple|banana</b>)</span>
</f7-list-input>
<f7-list-input
label="E-mail"
type="email"
placeholder="Your e-mail"
info="Default e-mail validation"
required
validate
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="URL"
type="url"
placeholder="Your URL"
info="Default URL validation"
required
validate
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
label="Number"
type="text"
placeholder="Enter number"
info="With custom error message"
error-message="Only numbers please!"
required
validate
pattern="[0-9]*"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
</f7-list>
Icon + Input
<f7-list no-hairlines-md>
<f7-list-input
type="text"
placeholder="Your name"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
type="password"
placeholder="Your password"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
type="email"
placeholder="Your e-mail"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
<f7-list-input
type="url"
placeholder="URL"
clear-button
>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
</f7-list-input>
</f7-list>
Label + Input
<f7-list no-hairlines-md>
<f7-list-input
label="Name"
type="text"
placeholder="Your name"
clear-button
></f7-list-input>
<f7-list-input
label="Password"
type="password"
placeholder="Your password"
clear-button
></f7-list-input>
<f7-list-input
label="E-mail"
type="email"
placeholder="Your e-mail"
clear-button
></f7-list-input>
<f7-list-input
label="URL"
type="url"
placeholder="URL"
clear-button
></f7-list-input>
</f7-list>
Only Inputs
<f7-list no-hairlines-md>
<f7-list-input
type="text"
placeholder="Your name"
clear-button
></f7-list-input>
<f7-list-input
type="password"
placeholder="Your password"
clear-button
></f7-list-input>
<f7-list-input
type="email"
placeholder="Your e-mail"
clear-button
></f7-list-input>
<f7-list-input
type="url"
placeholder="URL"
clear-button
></f7-list-input>
</f7-list>
Inputs + Additional Info
<f7-list no-hairlines-md>
<f7-list-input
type="text"
placeholder="Your name"
info="Full name please"
clear-button
></f7-list-input>
<f7-list-input
type="password"
placeholder="Your password"
info="8 characters minimum"
clear-button
></f7-list-input>
<f7-list-input
type="email"
placeholder="Your e-mail"
info="Your work e-mail address"
clear-button
></f7-list-input>
<f7-list-input
type="url"
placeholder="URL"
info="Your website URL"
clear-button
></f7-list-input>
</f7-list>
Only Inputs Inset
<f7-list inset>
<f7-list-input
type="text"
placeholder="Your name"
clear-button
></f7-list-input>
<f7-list-input
type="password"
placeholder="Your password"
clear-button
></f7-list-input>
<f7-list-input
type="email"
placeholder="Your e-mail"
clear-button
></f7-list-input>
<f7-list-input
type="url"
placeholder="URL"
clear-button
></f7-list-input>
</f7-list>