Input / Form Elements Vue Components

Input Components
Input Properties
Input Events
Input Slots
Input v-model
Examples

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

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: 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
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. `<f7-list-input type="email" validate :onValidate="(isValid) => setInputValid(isValid)" />`
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 `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
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: 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
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. `<f7-input type="email" validate :onValidate="(isValid) => setInputValid(isValid)" />`
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 `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
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 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

f7-list-input and f7-input Vue components support v-model on value prop:

<template>
  <p>Name is {{ name }}</p>
  <p>Email is {{ email }}</p>
  ...
  <f7-list-input
    label="Name"
    type="text"
    placeholder="Your name"
    clear-button
    v-model:value="name"
  />

  <f7-input
    type="text"
    placeholder="Your email"
    clear-button
    v-model:value="email"
  />
  ...
</template>
<script>
  export default {
    data() {
      name: '',
      email: '',
    },
    ...
  };
</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
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Password"
    type="password"
    placeholder="Your password"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="E-mail"
    type="email"
    placeholder="Your e-mail"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="URL"
    type="url"
    placeholder="URL"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Phone"
    type="tel"
    placeholder="Your phone number"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Gender"
    type="select"
    value="Male"
    placeholder="Please choose..."
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </f7-list-input>

  <f7-list-input
    label="Birthday"
    type="date"
    value="2014-04-30"
    placeholder="Please choose..."
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Date time"
    type="datetime-local"
    placeholder="Please choose..."
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Range"
    :input="false"
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
    <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"
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Resizable"
    type="textarea"
    resizable
    placeholder="Bio"
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </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
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Password"
    type="password"
    placeholder="Your password"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="E-mail"
    type="email"
    placeholder="Your e-mail"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="URL"
    type="url"
    placeholder="URL"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Phone"
    type="tel"
    placeholder="Your phone number"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Gender"
    type="select"
    value="Male"
    placeholder="Please choose..."
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </f7-list-input>

  <f7-list-input
    label="Birthday"
    type="date"
    value="2014-04-30"
    placeholder="Please choose..."
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Date time"
    type="datetime-local"
    placeholder="Please choose..."
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Range"
    :input="false"
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
    <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"
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Resizable"
    type="textarea"
    resizable
    placeholder="Bio"
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </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
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Password"
    floating-label
    type="password"
    placeholder="Your password"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="E-mail"
    floating-label
    type="email"
    placeholder="Your e-mail"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="URL"
    floating-label
    type="url"
    placeholder="URL"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Phone"
    floating-label
    type="tel"
    placeholder="Your phone number"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Resizable"
    floating-label
    type="textarea"
    resizable
    placeholder="Bio"
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </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
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>
  <f7-list-input
    outline
    label="Password"
    floating-label
    type="password"
    placeholder="Your password"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>
  <f7-list-input
    outline
    label="E-mail"
    floating-label
    type="email"
    placeholder="Your e-mail"
    clear-button
  >
   <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>
  <f7-list-input
    outline
    label="URL"
    floating-label
    type="url"
    placeholder="URL"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>
  <f7-list-input
    outline
    label="Phone"
    floating-label
    type="tel"
    placeholder="Your phone number"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>
  <f7-list-input
    outline
    label="Bio"
    floating-label
    type="textarea"
    resizable
    placeholder="Bio"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </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
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="Fruit"
    type="text"
    placeholder="Type 'apple' or 'banana'"
    required
    validate
    pattern="apple|banana"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
    <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
  >
    
    v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    label="URL"
    type="url"
    placeholder="Your URL"
    info="Default URL validation"
    required
    validate
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </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
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>
</f7-list>

Icon + Input

<f7-list no-hairlines-md>
  <f7-list-input
    type="text"
    placeholder="Your name"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    type="password"
    placeholder="Your password"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    type="email"
    placeholder="Your e-mail"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </f7-list-input>

  <f7-list-input
    type="url"
    placeholder="URL"
    clear-button
  >
    <template v-slot:media>
      <f7-icon icon="demo-list-icon"></f7-icon>
    </template>
  </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>