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.

    There are following components included:

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

    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>
    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.     label="Phone"
    141.     type="tel"
    142.     placeholder="Your phone number"
    143.     clear-button
    144.   >
    145.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    146.   </f7-list-input>
    148.   <f7-list-input
    149.     label="Gender"
    150.     type="select"
    151.     defaultValue="Male"
    152.     placeholder="Please choose..."
    153.   >
    154.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    155.     <option value="Male">Male</option>
    156.     <option value="Female">Female</option>
    157.   </f7-list-input>
    159.   <f7-list-input
    160.     label="Birthday"
    161.     type="date"
    162.     defaultValue="2014-04-30"
    163.     placeholder="Please choose..."
    164.   >
    165.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    166.   </f7-list-input>
    168.   <f7-list-input
    169.     label="Date time"
    170.     type="datetime-local"
    171.     placeholder="Please choose..."
    172.   >
    173.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    174.   </f7-list-input>
    176.   <f7-list-input
    177.     label="Range"
    178.     :input="false"
    179.   >
    180.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    181.     <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
    182.   </f7-list-input>
    184.   <f7-list-input
    185.     label="Textarea"
    186.     type="textarea"
    187.     placeholder="Bio"
    188.   >
    189.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    190.   </f7-list-input>
    192.   <f7-list-input
    193.     label="Resizable"
    194.     type="textarea"
    195.     resizable
    196.     placeholder="Bio"
    197.   >
    198.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    199.   </f7-list-input>
    200. </f7-list>
    202. <f7-block-title>Floating Labels (MD-theme only)</f7-block-title>
    203. <f7-list no-hairlines-md>
    204.   <f7-list-input
    205.     label="Name"
    206.     floating-label
    207.     type="text"
    208.     placeholder="Your name"
    209.     clear-button
    210.   >
    211.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    212.   </f7-list-input>
    214.   <f7-list-input
    215.     label="Password"
    216.     floating-label
    217.     type="password"
    218.     placeholder="Your password"
    219.     clear-button
    220.   >
    221.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    222.   </f7-list-input>
    224.   <f7-list-input
    225.     label="E-mail"
    226.     floating-label
    227.     type="email"
    228.     placeholder="Your e-mail"
    229.     clear-button
    230.   >
    231.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    232.   </f7-list-input>
    234.   <f7-list-input
    235.     label="URL"
    236.     floating-label
    237.     type="url"
    238.     placeholder="URL"
    239.     clear-button
    240.   >
    241.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    242.   </f7-list-input>
    244.   <f7-list-input
    245.     label="Phone"
    246.     floating-label
    247.     type="tel"
    248.     placeholder="Your phone number"
    249.     clear-button
    250.   >
    251.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    252.   </f7-list-input>
    254.   <f7-list-input
    255.     label="Resizable"
    256.     floating-label
    257.     type="textarea"
    258.     resizable
    259.     placeholder="Bio"
    260.   >
    261.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    262.   </f7-list-input>
    263. </f7-list>
    265. <f7-block-title>Validation + Additional Info</f7-block-title>
    266. <f7-list no-hairlines-md>
    267.   <f7-list-input
    268.     label="Name"
    269.     type="text"
    270.     placeholder="Your name"
    271.     info="Default validation"
    272.     required
    273.     validate
    274.     clear-button
    275.   >
    276.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    277.   </f7-list-input>
    279.   <f7-list-input
    280.     label="Fruit"
    281.     type="text"
    282.     placeholder="Type 'apple' or 'banana'"
    283.     required
    284.     validate
    285.     pattern="apple|banana"
    286.     clear-button
    287.   >
    288.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    289.     <span slot="info">Pattern validation (<b>apple|banana</b>)</span>
    290.   </f7-list-input>
    292.   <f7-list-input
    293.     label="E-mail"
    294.     type="email"
    295.     placeholder="Your e-mail"
    296.     info="Default e-mail validation"
    297.     required
    298.     validate
    299.     clear-button
    300.   >
    301.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    302.   </f7-list-input>
    304.   <f7-list-input
    305.     label="URL"
    307.     placeholder="Your URL"
    308.     info="Default URL validation"
    309.     required
    310.     clear-button
    311.   >
    312.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    313.   </f7-list-input>
    315.   <f7-list-input
    316.     label="Number"
    317.     type="text"
    318.     placeholder="Enter number"
    319.     info="With custom error message"
    320.     error-message="Only numbers please!"
    321.     required
    322.     validate
    323.     pattern="[0-9]*"
    324.     clear-button
    325.   >
    326.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    327.   </f7-list-input>
    328. </f7-list>
    330. <f7-block-title>Icon + Input</f7-block-title>
    331. <f7-list no-hairlines-md>
    332.   <f7-list-input
    333.     type="text"
    334.     placeholder="Your name"
    335.     clear-button
    336.   >
    337.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    338.   </f7-list-input>
    340.   <f7-list-input
    341.     type="password"
    342.     placeholder="Your password"
    343.     clear-button
    344.   >
    345.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    346.   </f7-list-input>
    348.   <f7-list-input
    349.     type="email"
    350.     placeholder="Your e-mail"
    351.     clear-button
    352.   >
    353.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    354.   </f7-list-input>
    356.   <f7-list-input
    357.     type="url"
    358.     placeholder="URL"
    359.     clear-button
    360.   >
    361.     <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
    362.   </f7-list-input>
    364. </f7-list>
    366. <f7-block-title>Label + Input</f7-block-title>
    367. <f7-list no-hairlines-md>
    368.   <f7-list-input
    369.     label="Name"
    370.     type="text"
    371.     placeholder="Your name"
    372.     clear-button
    373.   ></f7-list-input>
    375.   <f7-list-input
    376.     label="Password"
    377.     type="password"
    378.     placeholder="Your password"
    379.     clear-button
    380.   ></f7-list-input>
    382.   <f7-list-input
    383.     label="E-mail"
    384.     type="email"
    385.     placeholder="Your e-mail"
    386.     clear-button
    387.   ></f7-list-input>
    389.   <f7-list-input
    390.     label="URL"
    391.     type="url"
    392.     placeholder="URL"
    393.     clear-button
    394.   ></f7-list-input>
    395. </f7-list>
    397. <f7-block-title>Only Inputs</f7-block-title>
    398. <f7-list no-hairlines-md>
    399.   <f7-list-input
    400.     type="text"
    401.     placeholder="Your name"
    402.     clear-button
    403.   ></f7-list-input>
    405.   <f7-list-input
    406.     type="password"
    407.     placeholder="Your password"
    408.     clear-button
    409.   ></f7-list-input>
    411.   <f7-list-input
    412.     type="email"
    413.     placeholder="Your e-mail"
    414.     clear-button
    415.   ></f7-list-input>
    417.   <f7-list-input
    418.     type="url"
    419.     placeholder="URL"
    420.     clear-button
    421.   ></f7-list-input>
    422. </f7-list>
    424. <f7-block-title>Inputs + Additional Info</f7-block-title>
    425. <f7-list no-hairlines-md>
    426.   <f7-list-input
    427.     type="text"
    428.     placeholder="Your name"
    429.     info="Full name please"
    430.     clear-button
    431.   ></f7-list-input>
    433.   <f7-list-input
    434.     type="password"
    435.     placeholder="Your password"
    436.     info="8 characters minimum"
    437.     clear-button
    438.   ></f7-list-input>
    440.   <f7-list-input
    441.     type="email"
    442.     placeholder="Your e-mail"
    443.     info="Your work e-mail address"
    444.     clear-button
    445.   ></f7-list-input>
    447.   <f7-list-input
    448.     type="url"
    449.     placeholder="URL"
    450.     info="Your website URL"
    451.     clear-button
    452.   ></f7-list-input>
    453. </f7-list>
    455. <f7-block-title>Only Inputs Inset</f7-block-title>
    456. <f7-list inset>
    457.   <f7-list-input
    458.     type="text"
    459.     placeholder="Your name"
    460.     clear-button
    461.   ></f7-list-input>
    463.   <f7-list-input
    464.     type="password"
    465.     placeholder="Your password"
    466.     clear-button
    467.   ></f7-list-input>
    469.   <f7-list-input
    470.     type="email"
    471.     placeholder="Your e-mail"
    472.     clear-button
    473.   ></f7-list-input>
    475.   <f7-list-input
    476.     type="url"
    477.     placeholder="URL"
    478.     clear-button
    479.   ></f7-list-input>