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.

    Check out Framework7’s for their appearance.

    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 on 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 scrollHeight properties
    inputEmpty(event)Fired when input value becomes empty
    inputNotempty(event)Fired when input value becomes not empty
    calendarChange(value)Fired when type=”datepicker” Calendar value changed. As an argument it receives array with selected dates.
    colorPickerChange(value)Fired when type=”colorpicker” Color Picker value changed. As an argument it receives object with Color Picker value.
    textEditorChange(value)Fired when type=”texteditor” Text Editor value changed. As an argument it receives Texteditor value (HTML string).

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

    Full Layout / Inline Labels

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

    Full Layout / Stacked Labels

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

    Date Pickers

    Color Pickers

    1. <List noHairlinesMd>
    2.   <ListInput
    3.     type="colorpicker"
    4.     label="Color Wheel"
    5.     placeholder="Color"
    6.     readonly
    7.     value={{ hex: '#00ff00' }}
    8.   />
    9.   <ListInput
    10.     type="colorpicker"
    11.     label="Saturation-Brightness Spectrum"
    12.     placeholder="Color"
    13.     readonly
    14.     value={{ hex: '#ff0000' }}
    15.     colorPickerParams={{
    16.       modules: ['sb-spectrum', 'hue-slider'],
    17.     }}
    18.   />
    19.   <ListInput
    20.     type="colorpicker"
    21.     label="RGB Sliders"
    22.     placeholder="Color"
    23.     readonly
    24.     value={{ hex: '#0000ff' }}
    25.     colorPickerParams={{
    26.       modules: ['rgb-sliders'],
    27.       sliderValue: true,
    28.       sliderLabel: true,
    29.     }}
    30.   />
    31.   <ListInput
    32.     type="colorpicker"
    33.     label="RGBA Sliders"
    34.     placeholder="Color"
    35.     readonly
    36.     value={{ hex: '#ff00ff' }}
    37.     colorPickerParams={{
    38.       modules: ['rgb-sliders', 'alpha-slider'],
    39.       sliderValue: true,
    40.       sliderLabel: true,
    41.       formatValue(value) {
    42.         return `rgba(${value.rgba.join(', ')})`;
    43.       },
    44.     }}
    45.   />
    46.   <ListInput
    47.     type="colorpicker"
    48.     label="HSB Sliders"
    49.     placeholder="Color"
    50.     readonly
    51.     value={{ hex: '#00ff00' }}
    52.     colorPickerParams={{
    53.       modules: ['hsb-sliders'],
    54.       sliderValue: true,
    55.       sliderLabel: true,
    56.       formatValue(value) {
    57.         return `hsb(${value.hsb[0]}, ${value.hsb[1] * 1000 / 10}%, ${value.hsb[2] * 1000 / 10}%)`
    58.       },
    59.     }}
    60.   />
    61.   <ListInput
    62.     type="colorpicker"
    63.     label="RGB Bars"
    64.     placeholder="Color"
    65.     readonly
    66.     value={{ hex: '#0000ff' }}
    67.     colorPickerParams={{
    68.       modules: ['rgb-bars'],
    69.       openIn: 'auto',
    70.       barValue: true,
    71.       barLabel: true,
    72.       formatValue(value) {
    73.         return `rgb(${value.rgb.join(', ')})`;
    74.       },
    75.     }}
    76.   />
    77.   <ListInput
    78.     type="colorpicker"
    79.     label="RGB Sliders + Colors"
    80.     placeholder="Color"
    81.     readonly
    82.     value={{ hex: '#ffff00' }}
    83.     colorPickerParams={{
    84.       modules: ['initial-current-colors', 'rgb-sliders'],
    85.       sliderValue: true,
    86.       sliderLabel: true,
    87.       formatValue(value) {
    88.         return `rgb(${value.rgb.join(', ')})`;
    89.       },
    90.     }}
    91.   />
    92.   <ListInput
    93.     type="colorpicker"
    94.     label="Palette"
    95.     placeholder="Color"
    96.     readonly
    97.     value={{ hex: '#FFEBEE' }}
    98.     colorPickerParams={{
    99.       modules: ['palette'],
    100.       openIn: 'auto',
    101.       openInPhone: 'sheet',
    102.       palette: [
    103.         ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
    104.         ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
    105.         ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
    106.         ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
    107.         ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
    108.         ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
    109.         ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
    110.         ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
    111.       ],
    112.       formatValue(value) {
    113.         return value.hex;
    114.       },
    115.     }}
    116.   />
    117.   <ListInput
    118.     type="colorpicker"
    119.     label="Pro Mode"
    120.     placeholder="Color"
    121.     readonly
    122.     value={{ hex: '#00ffff' }}
    123.     colorPickerParams={{
    124.       modules: ['initial-current-colors', 'sb-spectrum', 'hsb-sliders', 'rgb-sliders', 'alpha-slider', 'hex', 'palette'],
    125.       openIn: 'auto',
    126.       sliderValue: true,
    127.       sliderValueEditable: true,
    128.       sliderLabel: true,
    129.       hexLabel: true,
    130.       hexValueEditable: true,
    131.       groupedModules: true,
    132.       palette: [
    133.         ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
    134.         ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
    135.         ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
    136.         ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
    137.         ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
    138.         ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
    139.         ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
    140.         ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
    141.       ],
    142.       formatValue(value) {
    143.         return `rgba(${value.rgba.join(', ')})`;
    144.       },
    145.     }}
    146.   />
    147. </List>

    Floating Labels

    1. <List noHairlinesMd>
    2.   <ListInput
    3.     label="Name"
    4.     floatingLabel
    5.     type="text"
    6.     placeholder="Your name"
    7.     clearButton
    8.   >
    9.     <Icon icon="demo-list-icon" slot="media"/>
    10.   </ListInput>
    12.   <ListInput
    13.     label="Password"
    14.     floatingLabel
    15.     type="password"
    16.     placeholder="Your password"
    17.     clearButton
    18.   >
    19.     <Icon icon="demo-list-icon" slot="media"/>
    20.   </ListInput>
    22.   <ListInput
    23.     label="E-mail"
    24.     floatingLabel
    25.     type="email"
    26.     placeholder="Your e-mail"
    27.   >
    28.     <Icon icon="demo-list-icon" slot="media"/>
    29.   </ListInput>
    31.   <ListInput
    32.     label="URL"
    33.     floatingLabel
    34.     type="url"
    35.     placeholder="URL"
    36.     clearButton
    37.   >
    38.     <Icon icon="demo-list-icon" slot="media"/>
    39.   </ListInput>
    41.   <ListInput
    42.     label="Phone"
    43.     floatingLabel
    44.     type="tel"
    45.     placeholder="Your phone number"
    46.     clearButton
    47.   >
    48.     <Icon icon="demo-list-icon" slot="media"/>
    49.   </ListInput>
    51.   <ListInput
    52.     label="Resizable"
    53.     floatingLabel
    54.     type="textarea"
    55.     resizable
    56.     placeholder="Bio"
    57.   >
    58.     <Icon icon="demo-list-icon" slot="media"/>
    59.   </ListInput>
    60. </List>

    Floating Labels + Outline Inputs

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

    Validation + Additional Info

    Icon + Input

    1. <List noHairlinesMd>
    2.   <ListInput
    3.     type="text"
    4.     placeholder="Your name"
    5.     clearButton
    6.   >
    7.     <Icon icon="demo-list-icon" slot="media"/>
    8.   </ListInput>
    10.   <ListInput
    11.     type="password"
    12.     placeholder="Your password"
    13.     clearButton
    14.   >
    15.     <Icon icon="demo-list-icon" slot="media"/>
    16.   </ListInput>
    18.   <ListInput
    19.     type="email"
    20.     placeholder="Your e-mail"
    21.     clearButton
    22.   >
    23.     <Icon icon="demo-list-icon" slot="media"/>
    24.   </ListInput>
    26.   <ListInput
    27.     type="url"
    28.     placeholder="URL"
    29.     clearButton
    30.   >
    31.     <Icon icon="demo-list-icon" slot="media"/>
    32.   </ListInput>
    34. </List>

    Label + Input

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

    Only Inputs

    1. <List noHairlinesMd>
    2.   <ListInput
    3.     type="text"
    4.     placeholder="Your name"
    5.     clearButton
    6.   />
    8.   <ListInput
    9.     type="password"
    10.     placeholder="Your password"
    11.     clearButton
    12.   />
    14.   <ListInput
    15.     type="email"
    16.     placeholder="Your e-mail"
    17.     clearButton
    18.   />
    20.   <ListInput
    21.     type="url"
    22.     placeholder="URL"
    23.     clearButton
    24.   />
    25. </List>

    Inputs + Additional Info

    Only Inputs Inset

    1. <List inset>
    2.   <ListInput
    3.     type="text"
    4.     placeholder="Your name"
    5.     clearButton
    6.   />
    8.   <ListInput
    9.     type="password"
    10.     placeholder="Your password"
    11.     clearButton
    12.   />
    14.   <ListInput
    15.     type="email"
    16.     placeholder="Your e-mail"
    17.     clearButton
    18.   />
    20.   <ListInput
    21.     type="url"
    22.     placeholder="URL"
    23.     clearButton

    ← Icon