Input / Form Elements Vue Components

    Form elements allow you to create flexible and beautiful Form layout. Form elements are just well known (List and 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>