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:

Input Properties

PropTypeDefaultDescription
<f7-list-input> properties
mediastringList item media image URL
labelstringInput's label text
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.
<f7-list-input
  type="email"
  validate
  :onValidate="(isValid) => setInputValid(isValid)"
/>
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
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

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

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

inputs.vue
<template>
  <f7-page>
    <f7-navbar title="Form Inputs"></f7-navbar>

    <f7-block-title>Full Layout / Stacked Labels</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input label="Name" type="text" placeholder="Your name" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

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

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

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

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

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

      <f7-list-input label="Birthday" type="date" placeholder="Please choose...">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

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

      <f7-list-input label="Range" :input="false">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
        <template #input>
          <f7-range :value="50" :min="0" :max="100" :step="1" />
        </template>
      </f7-list-input>

      <f7-list-input label="Textarea" type="textarea" placeholder="Bio">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Resizable" type="textarea" resizable placeholder="Bio">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Floating Labels</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input label="Name" floating-label type="text" placeholder="Your name" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

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

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

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

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

      <f7-list-input label="Resizable" floating-label type="textarea" resizable placeholder="Bio">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Floating Labels + Outline Inputs</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input
        outline
        label="Name"
        floating-label
        type="text"
        placeholder="Your name"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input
        outline
        label="Password"
        floating-label
        type="password"
        placeholder="Your password"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input
        outline
        label="E-mail"
        floating-label
        type="email"
        placeholder="Your e-mail"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input outline label="URL" floating-label type="url" placeholder="URL" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input
        outline
        label="Phone"
        floating-label
        type="tel"
        placeholder="Your phone number"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input
        outline
        label="Bio"
        floating-label
        type="textarea"
        resizable
        placeholder="Bio"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Validation + Additional Info</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input
        label="Name"
        type="text"
        placeholder="Your name"
        info="Default validation"
        required
        validate
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-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 #media>
          <f7-icon icon="demo-list-icon" />
        </template>
        <template #info>
          <span>Pattern validation (<b>apple|banana</b>)</span>
        </template>
      </f7-list-input>

      <f7-list-input
        label="E-mail"
        type="email"
        placeholder="Your e-mail"
        info="Default e-mail validation"
        required
        validate
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

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

    <f7-block-title>Icon + Input</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input type="text" placeholder="Your name" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

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

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

      <f7-list-input type="url" placeholder="URL" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Label + Input</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <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 strong-ios dividers-ios inset-ios>
      <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 strong-ios dividers-ios inset-ios>
      <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-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7List,
  f7Icon,
  f7ListInput,
  f7Range,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7List,
    f7Icon,
    f7ListInput,
    f7Range,
  },
};
</script>