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
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
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.
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
Input value
default-valuestring
number
Input value, in case of uncontrolled component
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
wrapbooleantrueWhen enabled it will be wrapped in <li> element
<f7-input> properties
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
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.
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
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

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 when 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

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:

<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

<f7-block-title>Full Layout / Inline Labels</f7-block-title>
<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>

<f7-block-title>Full Layout / Stacked Labels</f7-block-title>
<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>

<f7-block-title>Floating Labels</f7-block-title>
<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>

<f7-block-title>Validation + Additional Info</f7-block-title>
<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>

<f7-block-title>Icon + Input</f7-block-title>
<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>

<f7-block-title>Label + Input</f7-block-title>
<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>

<f7-block-title>Only Inputs</f7-block-title>
<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>

<f7-block-title>Inputs + Additional Info</f7-block-title>
<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>

<f7-block-title>Only Inputs Inset</f7-block-title>
<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>