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

    Prop Type Default Description
    <f7-list-input> properties
    id string Wrapping element ID attribute
    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 (affects MD theme only)
    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
    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.
    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
    input-id string Input element ID attribute
    value string
    number
    Input value
    default-value string
    number
    Input value, in case of uncontrolled component
    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
    <f7-label> properties
    floating boolean false Enables floating label (affects MD theme only)
    inline boolean false Makes label inline
    <f7-input> properties
    wrap boolean true Defines should the input be wraped with "item-input-wrap" element or not. Must be disabled when using outside of List View
    type string Input type. All default HTML5 input type, and few special ones:
    • textarea - to render textarea element
    • select - to render select element
    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.
    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
    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

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

    <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 (MD-theme only)</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>