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

Since Framework7 3.5.0 it is highly recommended that you only use **f7-list-input** component. It combines f7-list-item, f7-label and f7-input components in one component and provides much better and more correct input’s state handling.

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 (affects MD theme only)
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.
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
<f7-label> properties
floatingbooleanfalseEnables floating label (affects MD theme only)
inlinebooleanfalseMakes label inline
<f7-input> properties
wrapbooleantrueDefines should the input be wraped with “item-input-wrap” element or not. Must be disabled when using outside of List View
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.
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

Input Vue component (<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

  1. <f7-block-title>Full Layout / Inline Labels</f7-block-title>
  2. <f7-list inline-labels no-hairlines-md>
  3.   <f7-list-input
  4.     label="Name"
  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.     type="password"
  15.     placeholder="Your password"
  16.     clear-button
  17.   >
  18.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  19.   </f7-list-input>
  21.   <f7-list-input
  22.     label="E-mail"
  23.     type="email"
  24.     placeholder="Your e-mail"
  25.     clear-button
  26.   >
  27.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  28.   </f7-list-input>
  30.   <f7-list-input
  31.     label="URL"
  32.     type="url"
  33.     placeholder="URL"
  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="Phone"
  41.     type="tel"
  42.     placeholder="Your phone number"
  43.     clear-button
  44.   >
  45.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  46.   </f7-list-input>
  48.   <f7-list-input
  49.     label="Gender"
  50.     type="select"
  51.     defaultValue="Male"
  52.     placeholder="Please choose..."
  53.   >
  54.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  55.     <option value="Male">Male</option>
  56.     <option value="Female">Female</option>
  57.   </f7-list-input>
  59.   <f7-list-input
  60.     label="Birthday"
  61.     type="date"
  62.     defaultValue="2014-04-30"
  63.     placeholder="Please choose..."
  64.   >
  65.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  66.   </f7-list-input>
  68.   <f7-list-input
  69.     label="Date time"
  70.     type="datetime-local"
  71.     placeholder="Please choose..."
  72.   >
  73.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  74.   </f7-list-input>
  76.   <f7-list-input
  77.     label="Range"
  78.     :input="false"
  79.   >
  80.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  81.     <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
  82.   </f7-list-input>
  84.   <f7-list-input
  85.     label="Textarea"
  86.     type="textarea"
  87.     placeholder="Bio"
  88.   >
  89.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  90.   </f7-list-input>
  92.   <f7-list-input
  93.     label="Resizable"
  94.     type="textarea"
  95.     resizable
  96.     placeholder="Bio"
  97.   >
  98.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  99.   </f7-list-input>
  100. </f7-list>
  102. <f7-block-title>Full Layout / Stacked Labels</f7-block-title>
  103. <f7-list no-hairlines-md>
  104.   <f7-list-input
  105.     label="Name"
  106.     type="text"
  107.     placeholder="Your name"
  108.     clear-button
  109.   >
  110.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  111.   </f7-list-input>
  113.   <f7-list-input
  114.     label="Password"
  115.     type="password"
  116.     placeholder="Your password"
  117.     clear-button
  118.   >
  119.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  120.   </f7-list-input>
  122.   <f7-list-input
  123.     label="E-mail"
  124.     type="email"
  125.     placeholder="Your e-mail"
  126.     clear-button
  127.   >
  128.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  129.   </f7-list-input>
  131.   <f7-list-input
  132.     label="URL"
  133.     type="url"
  134.     placeholder="URL"
  135.     clear-button
  136.   >
  137.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  138.   </f7-list-input>
  140.   <f7-list-input
  141.     label="Phone"
  142.     type="tel"
  143.     placeholder="Your phone number"
  144.     clear-button
  145.   >
  146.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  147.   </f7-list-input>
  149.   <f7-list-input
  150.     label="Gender"
  151.     type="select"
  152.     defaultValue="Male"
  153.     placeholder="Please choose..."
  154.   >
  155.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  156.     <option value="Male">Male</option>
  157.     <option value="Female">Female</option>
  158.   </f7-list-input>
  160.   <f7-list-input
  161.     label="Birthday"
  162.     type="date"
  163.     defaultValue="2014-04-30"
  164.     placeholder="Please choose..."
  165.   >
  166.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  167.   </f7-list-input>
  169.   <f7-list-input
  170.     label="Date time"
  171.     type="datetime-local"
  172.     placeholder="Please choose..."
  173.   >
  174.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  175.   </f7-list-input>
  177.   <f7-list-input
  178.     label="Range"
  179.     :input="false"
  180.   >
  181.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  182.     <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
  183.   </f7-list-input>
  185.   <f7-list-input
  186.     label="Textarea"
  187.     type="textarea"
  188.     placeholder="Bio"
  189.   >
  190.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  191.   </f7-list-input>
  193.   <f7-list-input
  194.     label="Resizable"
  195.     type="textarea"
  196.     resizable
  197.     placeholder="Bio"
  198.   >
  199.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  200.   </f7-list-input>
  201. </f7-list>
  203. <f7-block-title>Floating Labels (MD-theme only)</f7-block-title>
  204. <f7-list no-hairlines-md>
  205.   <f7-list-input
  206.     label="Name"
  207.     floating-label
  208.     type="text"
  209.     placeholder="Your name"
  210.     clear-button
  211.   >
  212.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  213.   </f7-list-input>
  215.   <f7-list-input
  216.     label="Password"
  217.     floating-label
  218.     type="password"
  219.     placeholder="Your password"
  220.     clear-button
  221.   >
  222.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  223.   </f7-list-input>
  225.   <f7-list-input
  226.     label="E-mail"
  227.     floating-label
  228.     type="email"
  229.     placeholder="Your e-mail"
  230.     clear-button
  231.   >
  232.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  233.   </f7-list-input>
  235.   <f7-list-input
  236.     label="URL"
  237.     floating-label
  238.     type="url"
  239.     placeholder="URL"
  240.     clear-button
  241.   >
  242.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  243.   </f7-list-input>
  245.   <f7-list-input
  246.     label="Phone"
  247.     floating-label
  248.     type="tel"
  249.     placeholder="Your phone number"
  250.     clear-button
  251.   >
  252.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  253.   </f7-list-input>
  255.   <f7-list-input
  256.     label="Resizable"
  257.     floating-label
  258.     type="textarea"
  259.     resizable
  260.     placeholder="Bio"
  261.   >
  262.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  263.   </f7-list-input>
  264. </f7-list>
  266. <f7-block-title>Validation + Additional Info</f7-block-title>
  267. <f7-list no-hairlines-md>
  268.   <f7-list-input
  269.     label="Name"
  270.     type="text"
  271.     placeholder="Your name"
  272.     info="Default validation"
  273.     required
  274.     validate
  275.     clear-button
  276.   >
  277.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  278.   </f7-list-input>
  280.   <f7-list-input
  281.     label="Fruit"
  282.     type="text"
  283.     placeholder="Type 'apple' or 'banana'"
  284.     required
  285.     validate
  286.     pattern="apple|banana"
  287.     clear-button
  288.   >
  289.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  290.     <span slot="info">Pattern validation (<b>apple|banana</b>)</span>
  291.   </f7-list-input>
  293.   <f7-list-input
  294.     label="E-mail"
  295.     type="email"
  296.     placeholder="Your e-mail"
  297.     info="Default e-mail validation"
  298.     required
  299.     validate
  300.     clear-button
  301.   >
  302.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  303.   </f7-list-input>
  305.   <f7-list-input
  306.     label="URL"
  307.     type="url"
  308.     placeholder="Your URL"
  309.     info="Default URL validation"
  310.     required
  311.     validate
  312.     clear-button
  313.   >
  314.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  315.   </f7-list-input>
  317.   <f7-list-input
  318.     label="Number"
  319.     type="text"
  320.     placeholder="Enter number"
  321.     info="With custom error message"
  322.     error-message="Only numbers please!"
  323.     required
  324.     validate
  325.     pattern="[0-9]*"
  326.     clear-button
  327.   >
  328.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  329.   </f7-list-input>
  330. </f7-list>
  332. <f7-block-title>Icon + Input</f7-block-title>
  333. <f7-list no-hairlines-md>
  334.   <f7-list-input
  335.     type="text"
  336.     placeholder="Your name"
  337.     clear-button
  338.   >
  339.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  340.   </f7-list-input>
  342.   <f7-list-input
  343.     type="password"
  344.     placeholder="Your password"
  345.     clear-button
  346.   >
  347.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  348.   </f7-list-input>
  350.   <f7-list-input
  351.     type="email"
  352.     placeholder="Your e-mail"
  353.     clear-button
  354.   >
  355.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  356.   </f7-list-input>
  358.   <f7-list-input
  359.     type="url"
  360.     placeholder="URL"
  361.     clear-button
  362.   >
  363.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  364.   </f7-list-input>
  366. </f7-list>
  368. <f7-block-title>Label + Input</f7-block-title>
  369. <f7-list no-hairlines-md>
  370.   <f7-list-input
  371.     label="Name"
  372.     type="text"
  373.     placeholder="Your name"
  374.     clear-button
  375.   ></f7-list-input>
  377.   <f7-list-input
  378.     label="Password"
  379.     type="password"
  380.     placeholder="Your password"
  381.     clear-button
  382.   ></f7-list-input>
  384.   <f7-list-input
  385.     label="E-mail"
  386.     type="email"
  387.     placeholder="Your e-mail"
  388.     clear-button
  389.   ></f7-list-input>
  391.   <f7-list-input
  392.     label="URL"
  393.     type="url"
  394.     placeholder="URL"
  395.     clear-button
  396.   ></f7-list-input>
  397. </f7-list>
  399. <f7-block-title>Only Inputs</f7-block-title>
  400. <f7-list no-hairlines-md>
  401.   <f7-list-input
  402.     type="text"
  403.     placeholder="Your name"
  404.     clear-button
  405.   ></f7-list-input>
  407.   <f7-list-input
  408.     type="password"
  409.     placeholder="Your password"
  410.     clear-button
  411.   ></f7-list-input>
  413.   <f7-list-input
  414.     type="email"
  415.     placeholder="Your e-mail"
  416.     clear-button
  417.   ></f7-list-input>
  419.   <f7-list-input
  420.     type="url"
  421.     placeholder="URL"
  422.     clear-button
  423.   ></f7-list-input>
  424. </f7-list>
  426. <f7-block-title>Inputs + Additional Info</f7-block-title>
  427. <f7-list no-hairlines-md>
  428.   <f7-list-input
  429.     type="text"
  430.     placeholder="Your name"
  431.     info="Full name please"
  432.     clear-button
  433.   ></f7-list-input>
  435.   <f7-list-input
  436.     type="password"
  437.     placeholder="Your password"
  438.     info="8 characters minimum"
  439.     clear-button
  440.   ></f7-list-input>
  442.   <f7-list-input
  443.     type="email"
  444.     placeholder="Your e-mail"
  445.     info="Your work e-mail address"
  446.     clear-button
  447.   ></f7-list-input>
  449.   <f7-list-input
  450.     type="url"
  451.     placeholder="URL"
  452.     info="Your website URL"
  453.     clear-button
  454.   ></f7-list-input>
  455. </f7-list>
  457. <f7-block-title>Only Inputs Inset</f7-block-title>
  458. <f7-list inset>
  459.   <f7-list-input
  460.     type="text"
  461.     placeholder="Your name"
  462.     clear-button
  463.   ></f7-list-input>
  465.   <f7-list-input
  466.     type="password"
  467.     placeholder="Your password"
  468.     clear-button
  469.   ></f7-list-input>
  471.   <f7-list-input
  472.     type="email"
  473.     placeholder="Your e-mail"
  474.     clear-button
  475.   ></f7-list-input>
  477.   <f7-list-input
  478.     type="url"
  479.     placeholder="URL"
  480.     clear-button
  481.   ></f7-list-input>
  482. </f7-list>