Input / Form Elements Vue Components

    Form elements allow you to create flexible and beautiful Form layout. Form elements are just well known List View ( and List Item Vue components) but with few additional components.

    Check out Framework7’s for their appearance.

    There are following components included:

    • - list item input element
    • **f7-input** - input element

    Input Properties

    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.

    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

    v-model is not supported on f7-list-input / f7-input vue components. Instead, just use the combination of value property and @input event:

    Examples

    Full Layout / Inline Labels

    1. <f7-list inline-labels no-hairlines-md>
    2.   <f7-list-input
    3.     label="Name"
    4.     type="text"
    5.     placeholder="Your name"
    6.     clear-button
    7.   >
    8.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    9.   </f7-list-input>
    11.   <f7-list-input
    12.     label="Password"
    13.     type="password"
    14.     placeholder="Your password"
    15.     clear-button
    16.   >
    17.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    18.   </f7-list-input>
    20.   <f7-list-input
    21.     label="E-mail"
    22.     type="email"
    23.     placeholder="Your e-mail"
    24.     clear-button
    25.   >
    26.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    27.   </f7-list-input>
    29.   <f7-list-input
    30.     label="URL"
    31.     type="url"
    32.     placeholder="URL"
    33.     clear-button
    34.   >
    35.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    36.   </f7-list-input>
    38.   <f7-list-input
    39.     label="Phone"
    40.     type="tel"
    41.     placeholder="Your phone number"
    42.     clear-button
    43.   >
    44.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    45.   </f7-list-input>
    47.   <f7-list-input
    48.     label="Gender"
    49.     type="select"
    50.     defaultValue="Male"
    51.     placeholder="Please choose..."
    52.   >
    53.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    54.     <option value="Male">Male</option>
    55.     <option value="Female">Female</option>
    56.   </f7-list-input>
    58.   <f7-list-input
    59.     label="Birthday"
    60.     type="date"
    61.     defaultValue="2014-04-30"
    62.     placeholder="Please choose..."
    63.   >
    64.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    65.   </f7-list-input>
    67.   <f7-list-input
    68.     label="Date time"
    69.     type="datetime-local"
    70.     placeholder="Please choose..."
    71.   >
    72.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    73.   </f7-list-input>
    75.   <f7-list-input
    76.     label="Range"
    77.     :input="false"
    78.   >
    79.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    80.     <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
    81.   </f7-list-input>
    83.   <f7-list-input
    84.     label="Textarea"
    85.     type="textarea"
    86.     placeholder="Bio"
    87.   >
    88.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    89.   </f7-list-input>
    91.   <f7-list-input
    92.     label="Resizable"
    93.     type="textarea"
    94.     resizable
    95.     placeholder="Bio"
    96.   >
    97.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    98.   </f7-list-input>
    99. </f7-list>

    Full Layout / Stacked Labels

    1. <f7-list no-hairlines-md>
    2.   <f7-list-input
    3.     label="Name"
    4.     type="text"
    5.     placeholder="Your name"
    6.     clear-button
    7.   >
    8.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    9.   </f7-list-input>
    11.   <f7-list-input
    12.     label="Password"
    13.     type="password"
    14.     placeholder="Your password"
    15.     clear-button
    16.   >
    17.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    18.   </f7-list-input>
    20.   <f7-list-input
    21.     label="E-mail"
    22.     type="email"
    23.     placeholder="Your e-mail"
    24.     clear-button
    25.   >
    26.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    27.   </f7-list-input>
    29.   <f7-list-input
    31.     type="url"
    32.     placeholder="URL"
    33.     clear-button
    34.   >
    35.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    36.   </f7-list-input>
    38.   <f7-list-input
    39.     type="tel"
    40.     placeholder="Your phone number"
    41.     clear-button
    42.   >
    43.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    44.   </f7-list-input>
    46.   <f7-list-input
    47.     label="Gender"
    48.     type="select"
    49.     defaultValue="Male"
    50.     placeholder="Please choose..."
    51.   >
    52.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    53.     <option value="Male">Male</option>
    54.     <option value="Female">Female</option>
    55.   </f7-list-input>
    57.   <f7-list-input
    58.     label="Birthday"
    59.     type="date"
    60.     defaultValue="2014-04-30"
    61.     placeholder="Please choose..."
    62.   >
    63.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    64.   </f7-list-input>
    66.   <f7-list-input
    67.     label="Date time"
    68.     type="datetime-local"
    69.     placeholder="Please choose..."
    70.   >
    71.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    72.   </f7-list-input>
    74.   <f7-list-input
    75.     label="Range"
    76.     :input="false"
    77.   >
    78.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    79.     <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
    80.   </f7-list-input>
    82.   <f7-list-input
    83.     label="Textarea"
    84.     type="textarea"
    85.     placeholder="Bio"
    86.   >
    87.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    88.   </f7-list-input>
    90.   <f7-list-input
    91.     label="Resizable"
    92.     type="textarea"
    93.     resizable
    94.     placeholder="Bio"
    95.   >
    96.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    97.   </f7-list-input>
    98. </f7-list>

    Date Pickers

    1. <f7-list no-hairlines-md>
    2.   <f7-list-input
    3.     label="Default setup"
    4.     type="datepicker"
    5.     placeholder="Your birth date"
    6.     readonly
    7.   ></f7-list-input>
    8.   <f7-list-input
    9.     label="Custom date format"
    10.     type="datepicker"
    11.     placeholder="Select date"
    12.     readonly
    13.     :calendar-params="{dateFormat: 'DD, MM dd, yyyy'}"
    14.   ></f7-list-input>
    15.   <f7-list-input
    16.     label="Multiple Values"
    17.     type="datepicker"
    18.     placeholder="Select multiple dates"
    19.     readonly
    20.     :calendar-params="{ dateFormat: 'M dd yyyy', multiple: true }"
    21.   ></f7-list-input>
    22.   <f7-list-input
    23.     label="Range Picker"
    24.     type="datepicker"
    25.     placeholder="Select date range"
    26.     readonly
    27.     :calendar-params="{ dateFormat: 'M dd yyyy', rangePicker: true }"
    28.   ></f7-list-input>
    29.   <f7-list-input
    30.     label="Open in Modal"
    31.     type="datepicker"
    32.     placeholder="Select date"
    33.     readonly
    34.     :calendar-params="{openIn: 'customModal', header: true, footer: true, dateFormat: 'MM dd yyyy'}"
    35.   ></f7-list-input>
    36. </f7-list>

    Color Pickers

    Floating Labels

    1. <f7-list no-hairlines-md>
    2.   <f7-list-input
    3.     label="Name"
    4.     floating-label
    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.     floating-label
    15.     type="password"
    16.     placeholder="Your password"
    17.     clear-button
    18.   >
    19.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    20.   </f7-list-input>
    22.   <f7-list-input
    23.     label="E-mail"
    24.     floating-label
    25.     type="email"
    26.     placeholder="Your e-mail"
    27.     clear-button
    28.   >
    29.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    30.   </f7-list-input>
    32.   <f7-list-input
    33.     label="URL"
    34.     floating-label
    35.     type="url"
    36.     placeholder="URL"
    37.     clear-button
    38.   >
    39.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    40.   </f7-list-input>
    42.   <f7-list-input
    43.     label="Phone"
    44.     floating-label
    45.     type="tel"
    46.     placeholder="Your phone number"
    47.     clear-button
    48.   >
    49.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    50.   </f7-list-input>
    52.   <f7-list-input
    53.     label="Resizable"
    54.     floating-label
    55.     type="textarea"
    56.     resizable
    57.     placeholder="Bio"
    58.   >
    59.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    60.   </f7-list-input>
    61. </f7-list>

    Floating Labels + Outline Inputs

    1. <f7-list no-hairlines-md>
    2.   <f7-list-input
    3.     outline
    4.     label="Name"
    5.     floating-label
    6.     type="text"
    7.     placeholder="Your name"
    8.     clear-button
    9.   >
    10.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    11.   </f7-list-input>
    12.   <f7-list-input
    13.     outline
    14.     label="Password"
    15.     floating-label
    16.     type="password"
    17.     placeholder="Your password"
    18.     clear-button
    19.   >
    20.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    21.   </f7-list-input>
    23.     outline
    24.     label="E-mail"
    25.     floating-label
    26.     type="email"
    27.     clear-button
    28.   >
    29.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    30.   </f7-list-input>
    31.   <f7-list-input
    32.     outline
    33.     label="URL"
    34.     floating-label
    35.     type="url"
    36.     placeholder="URL"
    37.     clear-button
    38.   >
    39.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    40.   </f7-list-input>
    41.   <f7-list-input
    42.     outline
    43.     label="Phone"
    44.     floating-label
    45.     type="tel"
    46.     placeholder="Your phone number"
    47.     clear-button
    48.   >
    49.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    50.   </f7-list-input>
    51.   <f7-list-input
    52.     outline
    53.     label="Bio"
    54.     floating-label
    55.     type="textarea"
    56.     resizable
    57.     placeholder="Bio"
    58.     clear-button
    59.   >
    60.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    61.   </f7-list-input>
    62. </f7-list>

    Validation + Additional Info

    1. <f7-list no-hairlines-md>
    2.   <f7-list-input
    3.     label="Name"
    4.     type="text"
    5.     placeholder="Your name"
    6.     info="Default validation"
    7.     required
    8.     validate
    9.     clear-button
    10.   >
    11.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    12.   </f7-list-input>
    14.   <f7-list-input
    15.     label="Fruit"
    16.     type="text"
    17.     placeholder="Type 'apple' or 'banana'"
    18.     required
    19.     validate
    20.     pattern="apple|banana"
    21.     clear-button
    22.   >
    23.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    24.     <span slot="info">Pattern validation (<b>apple|banana</b>)</span>
    25.   </f7-list-input>
    27.   <f7-list-input
    28.     label="E-mail"
    29.     type="email"
    30.     placeholder="Your e-mail"
    31.     info="Default e-mail validation"
    32.     required
    33.     validate
    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="URL"
    41.     type="url"
    42.     placeholder="Your URL"
    43.     info="Default URL validation"
    44.     required
    45.     validate
    46.     clear-button
    47.   >
    48.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    49.   </f7-list-input>
    51.   <f7-list-input
    52.     label="Number"
    53.     type="text"
    54.     placeholder="Enter number"
    55.     info="With custom error message"
    56.     error-message="Only numbers please!"
    57.     required
    58.     validate
    59.     pattern="[0-9]*"
    60.     clear-button
    61.   >
    62.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    63.   </f7-list-input>
    64. </f7-list>

    Icon + Input

    Label + Input

    1. <f7-list no-hairlines-md>
    2.   <f7-list-input
    3.     label="Name"
    4.     type="text"
    5.     placeholder="Your name"
    6.     clear-button
    7.   ></f7-list-input>
    9.   <f7-list-input
    10.     label="Password"
    11.     type="password"
    12.     placeholder="Your password"
    13.     clear-button
    14.   ></f7-list-input>
    16.   <f7-list-input
    17.     label="E-mail"
    18.     type="email"
    19.     placeholder="Your e-mail"
    20.     clear-button
    21.   ></f7-list-input>
    23.   <f7-list-input
    24.     label="URL"
    25.     type="url"
    26.     placeholder="URL"
    27.     clear-button
    28.   ></f7-list-input>
    29. </f7-list>

    Only Inputs

    1. <f7-list no-hairlines-md>
    2.   <f7-list-input
    3.     type="text"
    4.     placeholder="Your name"
    5.     clear-button
    6.   ></f7-list-input>
    8.   <f7-list-input
    9.     type="password"
    10.     placeholder="Your password"
    11.     clear-button
    12.   ></f7-list-input>
    14.   <f7-list-input
    15.     type="email"
    16.     placeholder="Your e-mail"
    17.     clear-button
    18.   ></f7-list-input>
    20.   <f7-list-input
    21.     type="url"
    22.     placeholder="URL"
    23.     clear-button
    24.   ></f7-list-input>
    25. </f7-list>

    Inputs + Additional Info

    1. <f7-list no-hairlines-md>
    2.   <f7-list-input
    3.     type="text"
    4.     placeholder="Your name"
    5.     info="Full name please"
    6.     clear-button
    7.   ></f7-list-input>
    9.   <f7-list-input
    10.     type="password"
    11.     placeholder="Your password"
    12.     info="8 characters minimum"
    13.     clear-button
    14.   ></f7-list-input>
    16.   <f7-list-input
    17.     type="email"
    18.     placeholder="Your e-mail"
    19.     info="Your work e-mail address"
    20.     clear-button
    21.   ></f7-list-input>
    23.   <f7-list-input
    24.     type="url"
    25.     placeholder="URL"
    26.     info="Your website URL"
    27.     clear-button
    28.   ></f7-list-input>

    Only Inputs Inset