Inputs / Form Inputs - 图1

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 element
  • f7-input - input element

Input Properties

PropTypeDefaultDescription
<f7-list-input> properties
idstringWrapping element ID attribute
mediastringList item media image URL
labelstringInput’s label text
inline-labelbooleanfalseMakes label inline
floating-labelbooleanfalseEnables floating label
outlinebooleanfalseMakes input outline
inputbooleantrueWhether it should render input element or not. Disable if you want to use custom input inside.
typestringInput type. All default HTML5 input type, and few special ones:
  • textarea - to render textarea element
  • select - to render select element
  • datepicker - to open Calendar on input focus
  • colorpicker - to open Color Picker on input focus
  • texteditor - to open Text Editor on input focus
resizablebooleanfalseMakes textarea resizable
inputStylestring
object		Value of input’s “style” attribute, in case you need to pass extra styles
clear-buttonbooleanfalseAdds input clear button that will clear input value on click
validatebooleanfalseWhen 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-blurbooleanfalseWhen enabled then input will be validated on blur only.
onValidatefunctionCallback to be executed on input validation, returns boolean value indication whether the input is valid or not.
  1. <f7-list-input
  2.   type=”email”
  3.   validate
  4.   :onValidate=”(isValid) => setInputValid(isValid)”
  5. />
error-messagestringCustom error message to show when input value is invalid
error-message-forcebooleanfalseForce error message to force. Useful in case you use custom validation and want to show/hide error message when you need it
infostringCustom additional text with information about input
namestringInput name
placeholderstringInput placeholder
input-idstringInput element ID attribute
valuestring
number
array
object

Input value.

If type=”datepicker” then value must be passed as what Calendar accepts - Array with dates, for example :value=”[new Date()]”

If type=”colorpicker” then value must be passed as what Color Picker accepts - Object with colors, for example :value=”{hex: ‘#ff0000’}”

If type=”texteditor” then value should be HTML string

default-valuestring
number		Input value, in case of uncontrolled component
inputmodestringValue of input’s native “inputmode” attribute
sizestring
number		Value of input’s native “size” attribute
patternstringValue of input’s native “pattern” attribute
acceptstring
number		Value of input’s native “accept” attribute
autocompletestringValue of input’s native “autocomplete” attribute
autofocusbooleanfalseValue of input’s native “autofocus” attribute
autosavestringValue of input’s native “autosave” attribute
disabledbooleanfalseMarks input as disabled
maxstring
number		Value of input’s native “max” attribute
minstring
number		Value of input’s native “min” attribute
stepstring
number		Value of input’s native “step” attribute
maxlengthstring
number		Value of input’s native “maxlength” attribute
minlengthstring
number		Value of input’s native “minlength” attribute
multiplebooleanfalseValue of input’s native “multiple” attribute
readonlybooleanfalseMarks input as readonly
requiredbooleanfalseMarks input as required
tabindexstring
number		Value of input’s native “tabindex” attribute
no-store-databooleanfalseAllows to ignore input value to be stored when using with Form Storage
ignore-store-databooleanfalseSame as previous
wrapbooleantrueWhen enabled it will be wrapped in <li> element
calendar-paramsobjectObject with Calendar Parameters which is used when type=”datepicker”
color-picker-paramsobjectObject with Color Picker Parameters which is used when type=”colorpicker”
text-editor-paramsobjectObject with Text Editor Parameters which is used when type=”texteditor”
<f7-input> properties
outlinebooleanfalseMakes input outline
wrapbooleantrueDefines should the input be wraped with <div class=”input”> element or not.
typestringInput type. All default HTML5 input type, and few special ones:
  • textarea - to render textarea element
  • select - to render select element
  • datepicker - to open Calendar on input focus
  • colorpicker - to open Color Picker on input focus
  • texteditor - to open Text Editor on input focus
resizablebooleanfalseMakes textarea resizable
inputStylestring
object		Value of input’s “style” attribute, in case you need to pass extra styles
clear-buttonbooleanfalseAdds input clear button that will clear input value on click
validatebooleanfalseWhen 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-blurbooleanfalseWhen enabled then input will be validated on blur only.
onValidatefunctionCallback to be executed on input validation, returns boolean value indication whether the input is valid or not.
  1. <f7-input
  2.   type=”email”
  3.   validate
  4.   :onValidate=”(isValid) => setInputValid(isValid)”
  5. />
error-messagestringCustom error message to show when input value is invalid
error-message-forcebooleanfalseForce error message to force. Useful in case you use custom validation and want to show/hide error message when you need it
infostringCustom additional text with information about input
namestringInput name
placeholderstringInput placeholder
idstringWrapping element ID attribute
input-idstringInput element ID attribute
valuestring
number

Input value.

If type=”datepicker” then value must be passed as what Calendar accepts - Array with dates, for example :value=”[new Date()]”

If type=”colorpicker” then value must be passed as what Color Picker accepts - Object with colors, for example :value=”{hex: ‘#ff0000’}”

If type=”texteditor” then value should be HTML string

inputmodestringValue of input’s native “inputmode” attribute
sizestring
number		Value of input’s native “size” attribute
patternstringValue of input’s native “pattern” attribute
acceptstring
number		Value of input’s native “accept” attribute
autocompletestringValue of input’s native “autocomplete” attribute
autofocusbooleanfalseValue of input’s native “autofocus” attribute
autosavestringValue of input’s native “autosave” attribute
checkedbooleanfalseMarks input as checked
disabledbooleanfalseMarks input as disabled
maxstring
number		Value of input’s native “max” attribute
minstring
number		Value of input’s native “min” attribute
stepstring
number		Value of input’s native “step” attribute
maxlengthstring
number		Value of input’s native “maxlength” attribute
minlengthstring
number		Value of input’s native “minlength” attribute
multiplebooleanfalseValue of input’s native “multiple” attribute
readonlybooleanfalseMarks input as readonly
requiredbooleanfalseMarks input as required
tabindexstring
number		Value of input’s native “tabindex” attribute
no-store-databooleanfalseAllows to ignore input value to be stored when using with Form Storage
ignore-store-databooleanfalseSame as previous
calendar-paramsobjectObject with Calendar Parameters which is used when type=”datepicker”
color-picker-paramsobjectObject with Color Picker Parameters which is used when type=”colorpicker”
text-editor-paramsobjectObject with Text Editor Parameters which is used when type=”texteditor”

Input Events

EventArgumentsDescription
<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 of type="select" or type="textarea" - element will be placed inside of select or textarea tags.
  • info - element will be inserted into container with info message
  • error-message - element will be inserted into container with error message
  • label - element will be inserted into container with input’s label
  • input - element will be inserted instead of input element (input prop must be also set to false)
  • root-start - element will be inserted in the beginning of <li> element
  • root / root-end - element will be inserted in the end of <li> element
  • content-start - element will be inserted in the beginning of <div class="item-content"> element
  • content / content-end - element will be inserted in the end of <div class="item-content"> element
  • inner-start - element will be inserted in the beginning of <div class="item-inner"> element
  • inner / inner-end - element will be inserted in the end of <div class="item-inner"> element
  • media - 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:

  1. <template>
  2.   ...
  3.   <f7-list-input
  4.     label="Name"
  5.     type="text"
  6.     :value="name"
  7.     @input="name = $event.target.value"
  8.     placeholder="Your name"
  9.     clear-button
  10.   ></f7-list-input>
  11.   ...
  12. </template>
  13. <script>
  14.   export default {
  15.     data() {
  16.       name: '',
  17.     },
  18.     ...
  19.   };
  20. </script>

Examples

Full Layout / Inline Labels

  1. <f7-list inline-labels no-hairlines-md>
  2.   <f7-list-input
  3.     label="Name"
  4.     type="text"
  5.     placeholder="Your name"
  6.     clear-button
  7.   >
  8.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  9.   </f7-list-input>
  11.   <f7-list-input
  12.     label="Password"
  13.     type="password"
  14.     placeholder="Your password"
  15.     clear-button
  16.   >
  17.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  18.   </f7-list-input>
  20.   <f7-list-input
  21.     label="E-mail"
  22.     type="email"
  23.     placeholder="Your e-mail"
  24.     clear-button
  25.   >
  26.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  27.   </f7-list-input>
  29.   <f7-list-input
  30.     label="URL"
  31.     type="url"
  32.     placeholder="URL"
  33.     clear-button
  34.   >
  35.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  36.   </f7-list-input>
  38.   <f7-list-input
  39.     label="Phone"
  40.     type="tel"
  41.     placeholder="Your phone number"
  42.     clear-button
  43.   >
  44.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  45.   </f7-list-input>
  47.   <f7-list-input
  48.     label="Gender"
  49.     type="select"
  50.     defaultValue="Male"
  51.     placeholder="Please choose..."
  52.   >
  53.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  54.     <option value="Male">Male</option>
  55.     <option value="Female">Female</option>
  56.   </f7-list-input>
  58.   <f7-list-input
  59.     label="Birthday"
  60.     type="date"
  61.     defaultValue="2014-04-30"
  62.     placeholder="Please choose..."
  63.   >
  64.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  65.   </f7-list-input>
  67.   <f7-list-input
  68.     label="Date time"
  69.     type="datetime-local"
  70.     placeholder="Please choose..."
  71.   >
  72.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  73.   </f7-list-input>
  75.   <f7-list-input
  76.     label="Range"
  77.     :input="false"
  78.   >
  79.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  80.     <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
  81.   </f7-list-input>
  83.   <f7-list-input
  84.     label="Textarea"
  85.     type="textarea"
  86.     placeholder="Bio"
  87.   >
  88.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  89.   </f7-list-input>
  91.   <f7-list-input
  92.     label="Resizable"
  93.     type="textarea"
  94.     resizable
  95.     placeholder="Bio"
  96.   >
  97.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  98.   </f7-list-input>
  99. </f7-list>

Full Layout / Stacked Labels

  1. <f7-list no-hairlines-md>
  2.   <f7-list-input
  3.     label="Name"
  4.     type="text"
  5.     placeholder="Your name"
  6.     clear-button
  7.   >
  8.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  9.   </f7-list-input>
  11.   <f7-list-input
  12.     label="Password"
  13.     type="password"
  14.     placeholder="Your password"
  15.     clear-button
  16.   >
  17.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  18.   </f7-list-input>
  20.   <f7-list-input
  21.     label="E-mail"
  22.     type="email"
  23.     placeholder="Your e-mail"
  24.     clear-button
  25.   >
  26.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  27.   </f7-list-input>
  29.   <f7-list-input
  30.     label="URL"
  31.     type="url"
  32.     placeholder="URL"
  33.     clear-button
  34.   >
  35.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  36.   </f7-list-input>
  38.   <f7-list-input
  39.     label="Phone"
  40.     type="tel"
  41.     placeholder="Your phone number"
  42.     clear-button
  43.   >
  44.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  45.   </f7-list-input>
  47.   <f7-list-input
  48.     label="Gender"
  49.     type="select"
  50.     defaultValue="Male"
  51.     placeholder="Please choose..."
  52.   >
  53.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  54.     <option value="Male">Male</option>
  55.     <option value="Female">Female</option>
  56.   </f7-list-input>
  58.   <f7-list-input
  59.     label="Birthday"
  60.     type="date"
  61.     defaultValue="2014-04-30"
  62.     placeholder="Please choose..."
  63.   >
  64.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  65.   </f7-list-input>
  67.   <f7-list-input
  68.     label="Date time"
  69.     type="datetime-local"
  70.     placeholder="Please choose..."
  71.   >
  72.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  73.   </f7-list-input>
  75.   <f7-list-input
  76.     label="Range"
  77.     :input="false"
  78.   >
  79.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  80.     <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
  81.   </f7-list-input>
  83.   <f7-list-input
  84.     label="Textarea"
  85.     type="textarea"
  86.     placeholder="Bio"
  87.   >
  88.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  89.   </f7-list-input>
  91.   <f7-list-input
  92.     label="Resizable"
  93.     type="textarea"
  94.     resizable
  95.     placeholder="Bio"
  96.   >
  97.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  98.   </f7-list-input>
  99. </f7-list>

Date Pickers

  1. <f7-list no-hairlines-md>
  2.   <f7-list-input
  3.     label="Default setup"
  4.     type="datepicker"
  5.     placeholder="Your birth date"
  6.     readonly
  7.   ></f7-list-input>
  8.   <f7-list-input
  9.     label="Custom date format"
  10.     type="datepicker"
  11.     placeholder="Select date"
  12.     readonly
  13.     :calendar-params="{dateFormat: 'DD, MM dd, yyyy'}"
  14.   ></f7-list-input>
  15.   <f7-list-input
  16.     label="Multiple Values"
  17.     type="datepicker"
  18.     placeholder="Select multiple dates"
  19.     readonly
  20.     :calendar-params="{ dateFormat: 'M dd yyyy', multiple: true }"
  21.   ></f7-list-input>
  22.   <f7-list-input
  23.     label="Range Picker"
  24.     type="datepicker"
  25.     placeholder="Select date range"
  26.     readonly
  27.     :calendar-params="{ dateFormat: 'M dd yyyy', rangePicker: true }"
  28.   ></f7-list-input>
  29.   <f7-list-input
  30.     label="Open in Modal"
  31.     type="datepicker"
  32.     placeholder="Select date"
  33.     readonly
  34.     :calendar-params="{openIn: 'customModal', header: true, footer: true, dateFormat: 'MM dd yyyy'}"
  35.   ></f7-list-input>
  36. </f7-list>

Color Pickers

  1. <f7-list no-hairlines-md>
  2.   <f7-list-input
  3.     type="colorpicker"
  4.     label="Color Wheel"
  5.     placeholder="Color"
  6.     readonly
  7.     :value="{ hex: '#00ff00' }"
  8.   ></f7-list-input>
  9.   <f7-list-input
  10.     type="colorpicker"
  11.     label="Saturation-Brightness Spectrum"
  12.     placeholder="Color"
  13.     readonly
  14.     :value="{ hex: '#ff0000' }"
  15.     :color-picker-params="{
  16.       modules: ['sb-spectrum', 'hue-slider'],
  17.     }"
  18.   ></f7-list-input>
  20.   <f7-list-input
  21.     type="colorpicker"
  22.     label="RGB Sliders"
  23.     placeholder="Color"
  24.     readonly
  25.     :value="{ hex: '#0000ff' }"
  26.     :color-picker-params="{
  27.       modules: ['rgb-sliders'],
  28.       sliderValue: true,
  29.       sliderLabel: true,
  30.     }"
  31.   ></f7-list-input>
  33.   <f7-list-input
  34.     type="colorpicker"
  35.     label="RGBA Sliders"
  36.     placeholder="Color"
  37.     readonly
  38.     :value="{ hex: '#ff00ff' }"
  39.     :color-picker-params="{
  40.       modules: ['rgb-sliders', 'alpha-slider'],
  41.       sliderValue: true,
  42.       sliderLabel: true,
  43.       formatValue(value) {
  44.         return `rgba(${value.rgba.join(', ')})`;
  45.       },
  46.     }"
  47.   ></f7-list-input>
  48.   <f7-list-input
  49.     type="colorpicker"
  50.     label="HSB Sliders"
  51.     placeholder="Color"
  52.     readonly
  53.     :value="{ hex: '#00ff00' }"
  54.     :color-picker-params="{
  55.       modules: ['hsb-sliders'],
  56.       sliderValue: true,
  57.       sliderLabel: true,
  58.       formatValue(value) {
  59.         return `hsb(${value.hsb[0]}, ${value.hsb[1] * 1000 / 10}%, ${value.hsb[2] * 1000 / 10}%)`
  60.       },
  61.     }"
  62.   ></f7-list-input>
  63.   <f7-list-input
  64.     type="colorpicker"
  65.     label="RGB Bars"
  66.     placeholder="Color"
  67.     readonly
  68.     :value="{ hex: '#0000ff' }"
  69.     :color-picker-params="{
  70.       modules: ['rgb-bars'],
  71.       openIn: 'auto',
  72.       barValue: true,
  73.       barLabel: true,
  74.       formatValue(value) {
  75.         return `rgb(${value.rgb.join(', ')})`;
  76.       },
  77.     }"
  78.   ></f7-list-input>
  79.   <f7-list-input
  80.     type="colorpicker"
  81.     label="RGB Sliders + Colors"
  82.     placeholder="Color"
  83.     readonly
  84.     :value="{ hex: '#ffff00' }"
  85.     :color-picker-params="{
  86.       modules: ['initial-current-colors', 'rgb-sliders'],
  87.       sliderValue: true,
  88.       sliderLabel: true,
  89.       formatValue(value) {
  90.         return `rgb(${value.rgb.join(', ')})`;
  91.       },
  92.     }"
  93.   ></f7-list-input>
  94.   <f7-list-input
  95.     type="colorpicker"
  96.     label="Palette"
  97.     placeholder="Color"
  98.     readonly
  99.     :value="{ hex: '#FFEBEE' }"
  100.     :color-picker-params="{
  101.       modules: ['palette'],
  102.       openIn: 'auto',
  103.       openInPhone: 'sheet',
  104.       palette: [
  105.         ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
  106.         ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
  107.         ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
  108.         ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
  109.         ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
  110.         ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
  111.         ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
  112.         ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
  113.       ],
  114.       formatValue(value) {
  115.         return value.hex;
  116.       },
  117.     }"
  118.   ></f7-list-input>
  119.   <f7-list-input
  120.     type="colorpicker"
  121.     label="Pro Mode"
  122.     placeholder="Color"
  123.     readonly
  124.     :value="{ hex: '#00ffff' }"
  125.     :color-picker-params="{
  126.       modules: ['initial-current-colors', 'sb-spectrum', 'hsb-sliders', 'rgb-sliders', 'alpha-slider', 'hex', 'palette'],
  127.       openIn: 'auto',
  128.       sliderValue: true,
  129.       sliderValueEditable: true,
  130.       sliderLabel: true,
  131.       hexLabel: true,
  132.       hexValueEditable: true,
  133.       groupedModules: true,
  134.       palette: [
  135.         ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
  136.         ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
  137.         ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
  138.         ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
  139.         ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
  140.         ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
  141.         ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
  142.         ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
  143.       ],
  144.       formatValue(value) {
  145.         return `rgba(${value.rgba.join(', ')})`;
  146.       },
  147.     }"
  148.   ></f7-list-input>
  149. </f7-list>

Floating Labels

  1. <f7-list no-hairlines-md>
  2.   <f7-list-input
  3.     label="Name"
  4.     floating-label
  5.     type="text"
  6.     placeholder="Your name"
  7.     clear-button
  8.   >
  9.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  10.   </f7-list-input>
  12.   <f7-list-input
  13.     label="Password"
  14.     floating-label
  15.     type="password"
  16.     placeholder="Your password"
  17.     clear-button
  18.   >
  19.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  20.   </f7-list-input>
  22.   <f7-list-input
  23.     label="E-mail"
  24.     floating-label
  25.     type="email"
  26.     placeholder="Your e-mail"
  27.     clear-button
  28.   >
  29.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  30.   </f7-list-input>
  32.   <f7-list-input
  33.     label="URL"
  34.     floating-label
  35.     type="url"
  36.     placeholder="URL"
  37.     clear-button
  38.   >
  39.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  40.   </f7-list-input>
  42.   <f7-list-input
  43.     label="Phone"
  44.     floating-label
  45.     type="tel"
  46.     placeholder="Your phone number"
  47.     clear-button
  48.   >
  49.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  50.   </f7-list-input>
  52.   <f7-list-input
  53.     label="Resizable"
  54.     floating-label
  55.     type="textarea"
  56.     resizable
  57.     placeholder="Bio"
  58.   >
  59.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  60.   </f7-list-input>
  61. </f7-list>

Floating Labels + Outline Inputs

  1. <f7-list no-hairlines-md>
  2.   <f7-list-input
  3.     outline
  4.     label="Name"
  5.     floating-label
  6.     type="text"
  7.     placeholder="Your name"
  8.     clear-button
  9.   >
  10.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  11.   </f7-list-input>
  12.   <f7-list-input
  13.     outline
  14.     label="Password"
  15.     floating-label
  16.     type="password"
  17.     placeholder="Your password"
  18.     clear-button
  19.   >
  20.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  21.   </f7-list-input>
  22.   <f7-list-input
  23.     outline
  24.     label="E-mail"
  25.     floating-label
  26.     type="email"
  27.     placeholder="Your e-mail"
  28.     clear-button
  29.   >
  30.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  31.   </f7-list-input>
  32.   <f7-list-input
  33.     outline
  34.     label="URL"
  35.     floating-label
  36.     type="url"
  37.     placeholder="URL"
  38.     clear-button
  39.   >
  40.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  41.   </f7-list-input>
  42.   <f7-list-input
  43.     outline
  44.     label="Phone"
  45.     floating-label
  46.     type="tel"
  47.     placeholder="Your phone number"
  48.     clear-button
  49.   >
  50.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  51.   </f7-list-input>
  52.   <f7-list-input
  53.     outline
  54.     label="Bio"
  55.     floating-label
  56.     type="textarea"
  57.     resizable
  58.     placeholder="Bio"
  59.     clear-button
  60.   >
  61.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  62.   </f7-list-input>
  63. </f7-list>

Validation + Additional Info

  1. <f7-list no-hairlines-md>
  2.   <f7-list-input
  3.     label="Name"
  4.     type="text"
  5.     placeholder="Your name"
  6.     info="Default validation"
  7.     required
  8.     validate
  9.     clear-button
  10.   >
  11.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  12.   </f7-list-input>
  14.   <f7-list-input
  15.     label="Fruit"
  16.     type="text"
  17.     placeholder="Type 'apple' or 'banana'"
  18.     required
  19.     validate
  20.     pattern="apple|banana"
  21.     clear-button
  22.   >
  23.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  24.     <span slot="info">Pattern validation (<b>apple|banana</b>)</span>
  25.   </f7-list-input>
  27.   <f7-list-input
  28.     label="E-mail"
  29.     type="email"
  30.     placeholder="Your e-mail"
  31.     info="Default e-mail validation"
  32.     required
  33.     validate
  34.     clear-button
  35.   >
  36.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  37.   </f7-list-input>
  39.   <f7-list-input
  40.     label="URL"
  41.     type="url"
  42.     placeholder="Your URL"
  43.     info="Default URL validation"
  44.     required
  45.     validate
  46.     clear-button
  47.   >
  48.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  49.   </f7-list-input>
  51.   <f7-list-input
  52.     label="Number"
  53.     type="text"
  54.     placeholder="Enter number"
  55.     info="With custom error message"
  56.     error-message="Only numbers please!"
  57.     required
  58.     validate
  59.     pattern="[0-9]*"
  60.     clear-button
  61.   >
  62.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  63.   </f7-list-input>
  64. </f7-list>

Icon + Input

  1. <f7-list no-hairlines-md>
  2.   <f7-list-input
  3.     type="text"
  4.     placeholder="Your name"
  5.     clear-button
  6.   >
  7.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  8.   </f7-list-input>
  10.   <f7-list-input
  11.     type="password"
  12.     placeholder="Your password"
  13.     clear-button
  14.   >
  15.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  16.   </f7-list-input>
  18.   <f7-list-input
  19.     type="email"
  20.     placeholder="Your e-mail"
  21.     clear-button
  22.   >
  23.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  24.   </f7-list-input>
  26.   <f7-list-input
  27.     type="url"
  28.     placeholder="URL"
  29.     clear-button
  30.   >
  31.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  32.   </f7-list-input>
  34. </f7-list>

Label + Input

  1. <f7-list no-hairlines-md>
  2.   <f7-list-input
  3.     label="Name"
  4.     type="text"
  5.     placeholder="Your name"
  6.     clear-button
  7.   ></f7-list-input>
  9.   <f7-list-input
  10.     label="Password"
  11.     type="password"
  12.     placeholder="Your password"
  13.     clear-button
  14.   ></f7-list-input>
  16.   <f7-list-input
  17.     label="E-mail"
  18.     type="email"
  19.     placeholder="Your e-mail"
  20.     clear-button
  21.   ></f7-list-input>
  23.   <f7-list-input
  24.     label="URL"
  25.     type="url"
  26.     placeholder="URL"
  27.     clear-button
  28.   ></f7-list-input>
  29. </f7-list>

Only Inputs

  1. <f7-list no-hairlines-md>
  2.   <f7-list-input
  3.     type="text"
  4.     placeholder="Your name"
  5.     clear-button
  6.   ></f7-list-input>
  8.   <f7-list-input
  9.     type="password"
  10.     placeholder="Your password"
  11.     clear-button
  12.   ></f7-list-input>
  14.   <f7-list-input
  15.     type="email"
  16.     placeholder="Your e-mail"
  17.     clear-button
  18.   ></f7-list-input>
  20.   <f7-list-input
  21.     type="url"
  22.     placeholder="URL"
  23.     clear-button
  24.   ></f7-list-input>
  25. </f7-list>

Inputs + Additional Info

  1. <f7-list no-hairlines-md>
  2.   <f7-list-input
  3.     type="text"
  4.     placeholder="Your name"
  5.     info="Full name please"
  6.     clear-button
  7.   ></f7-list-input>
  9.   <f7-list-input
  10.     type="password"
  11.     placeholder="Your password"
  12.     info="8 characters minimum"
  13.     clear-button
  14.   ></f7-list-input>
  16.   <f7-list-input
  17.     type="email"
  18.     placeholder="Your e-mail"
  19.     info="Your work e-mail address"
  20.     clear-button
  21.   ></f7-list-input>
  23.   <f7-list-input
  24.     type="url"
  25.     placeholder="URL"
  26.     info="Your website URL"
  27.     clear-button
  28.   ></f7-list-input>
  29. </f7-list>

Only Inputs Inset

  1. <f7-list inset>
  2.   <f7-list-input
  3.     type="text"
  4.     placeholder="Your name"
  5.     clear-button
  6.   ></f7-list-input>
  8.   <f7-list-input
  9.     type="password"
  10.     placeholder="Your password"
  11.     clear-button
  12.   ></f7-list-input>
  14.   <f7-list-input
  15.     type="email"
  16.     placeholder="Your e-mail"
  17.     clear-button
  18.   ></f7-list-input>
  20.   <f7-list-input
  21.     type="url"
  22.     placeholder="URL"
  23.     clear-button
  24.   ></f7-list-input>
  25. </f7-list>

← Icon

Link →