Input / Form Elements React Components

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

    There are following components included:

    • / **F7ListInput** - list item input element
    • **Input** / **F7Input** - input element
    EventArgumentsDescription
    <ListInput>, <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.
    inputClear(event)Fired when input clear button clicked
    textareaResize(event)Fired if resizable textarea resized. event.detail will contain object with the initialHeight, currentHeight and properties
    inputEmpty(event)Fired when input value becomes empty
    inputNotempty(event)Fired when input value becomes not empty

    Input React component (<ListInput>) 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
    • **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 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