Inputs / Form Inputs - 图1

Input / Form Elements React Components

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

Check out Framework7’s Inputs / Form Elements for their appearance.

Input Components

There are following components included:

  • **ListInput** / **F7ListInput** - list item input element
  • **Input** / **F7Input** - input element
  • **Label** / **F7Label** - input label element

Since Framework7 3.5.0 it is highly recommended that you only use **ListInput** component. It combines ListItem, Label and Input components in one component and provides much better and more correct input’s state handling.

Input Properties

PropTypeDefaultDescription
<ListInput> properties
idstringWrapping element ID attribute
mediastringList item media image URL
labelstringInput’s label text
inlineLabelbooleanfalseMakes label inline
floatingLabelbooleanfalseEnables floating label (affects MD theme only)
inputbooleantrueWhether it should render input element or not. Disable if you want to use custom input inside.
typestringInput type. All default HTML5 input type, and few special ones:
  • textarea - to render textarea element
  • select - to render select element
resizablebooleanfalseMakes textarea resizable
inputStyleobjectValue of input’s “style” attribute, in case you need to pass extra styles
clearButtonbooleanfalseAdds input clear button that will clear input value on click
validatebooleanfalseWhen enabled then input value will be validated on change based on passed “pattern” or based on input type. If you use custom validation and need more control on where to show/hide error message, then it is better to disable validation and use error-message together with error-message-force props.
errorMessagestringCustom error message to show when input value is invalid
errorMessageForcebooleanfalseForce error message to force. Useful in case you use custom validation and want to show/hide error message when you need it
infostringCustom additional text with information about input
namestringInput name
placeholderstringInput placeholder
idstringWrapping element ID attribute
inputIdstringInput element ID attribute
valuestring
number		Input value
defaultValuestring
number		Input value, in case of uncontrolled component
sizestring
number		Value of input’s native “size” attribute
patternstringValue of input’s native “pattern” attribute
acceptstring
number		Value of input’s native “accept” attribute
autocompletestringValue of input’s native “autocomplete” attribute
autofocusbooleanfalseValue of input’s native “autofocus” attribute
autosavestringValue of input’s native “autosave” attribute
checkedbooleanfalseMarks input as checked
disabledbooleanfalseMarks input as disabled
maxstring
number		Value of input’s native “max” attribute
minstring
number		Value of input’s native “min” attribute
stepstring
number		Value of input’s native “step” attribute
maxlengthstring
number		Value of input’s native “maxlength” attribute
minlengthstring
number		Value of input’s native “minlength” attribute
multiplebooleanfalseValue of input’s native “multiple” attribute
readonlybooleanfalseMarks input as readonly
requiredbooleanfalseMarks input as required
tabindexstring
number		Value of input’s native “tabindex” attribute
noStoreDatabooleanfalseAllows to ignore input value to be stored when using with Form Storage
ignoreStoreDatabooleanfalseSame as previous
<Label> properties
floatingbooleanfalseEnables floating label (affects MD theme only)
inlinebooleanfalseMakes label inline
<Input> properties
wrapbooleantrueDefines should the input be wraped with “item-input-wrap” element or not. Must be disabled when using outside of List View
typestringInput type. All default HTML5 input type, and few special ones:
  • textarea - to render textarea element
  • select - to render select element
resizablebooleanfalseMakes textarea resizable
inputStyleobjectValue of input’s “style” attribute, in case you need to pass extra styles
clearButtonbooleanfalseAdds input clear button that will clear input value on click
validatebooleanfalseWhen enabled then input value will be validated on change based on passed “pattern” or based on input type. If you use custom validation and need more control on where to show/hide error message, then it is better to disable validation and use error-message together with error-message-force props.
errorMessagestringCustom error message to show when input value is invalid
errorMessageForcebooleanfalseForce error message to force. Useful in case you use custom validation and want to show/hide error message when you need it
infostringCustom additional text with information about input
namestringInput name
placeholderstringInput placeholder
idstringWrapping element ID attribute
inputIdstringInput element ID attribute
valuestring
number		Input value
defaultValuestring
number		Input value, in case of uncontrolled component
sizestring
number		Value of input’s native “size” attribute
patternstringValue of input’s native “pattern” attribute
acceptstring
number		Value of input’s native “accept” attribute
autocompletestringValue of input’s native “autocomplete” attribute
autofocusbooleanfalseValue of input’s native “autofocus” attribute
autosavestringValue of input’s native “autosave” attribute
checkedbooleanfalseMarks input as checked
disabledbooleanfalseMarks input as disabled
maxstring
number		Value of input’s native “max” attribute
minstring
number		Value of input’s native “min” attribute
stepstring
number		Value of input’s native “step” attribute
maxlengthstring
number		Value of input’s native “maxlength” attribute
minlengthstring
number		Value of input’s native “minlength” attribute
multiplebooleanfalseValue of input’s native “multiple” attribute
readonlybooleanfalseMarks input as readonly
requiredbooleanfalseMarks input as required
tabindexstring
number		Value of input’s native “tabindex” attribute
noStoreDatabooleanfalseAllows to ignore input value to be stored when using with Form Storage
ignoreStoreDatabooleanfalseSame as previous

Input Events

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 scrollHeight properties
inputEmpty(event)Fired when input value becomes empty
inputNotempty(event)Fired when input value becomes not empty

Input Slots

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
  • **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. <BlockTitle>Full Layout / Inline Labels</BlockTitle>
  2. <List inlineLabels noHairlinesMd>
  3.   <ListInput
  4.     label="Name"
  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.     type="password"
  15.     placeholder="Your password"
  16.     clearButton
  17.   >
  18.     <Icon icon="demo-list-icon" slot="media"/>
  19.   </ListInput>
  21.   <ListInput
  22.     label="E-mail"
  23.     type="email"
  24.     placeholder="Your e-mail"
  25.     clearButton
  26.   >
  27.     <Icon icon="demo-list-icon" slot="media"/>
  28.   </ListInput>
  30.   <ListInput
  31.     label="URL"
  32.     type="url"
  33.     placeholder="URL"
  34.     clearButton
  35.   >
  36.     <Icon icon="demo-list-icon" slot="media"/>
  37.   </ListInput>
  39.   <ListInput
  40.     label="Phone"
  41.     type="tel"
  42.     placeholder="Your phone number"
  43.     clearButton
  44.   >
  45.     <Icon icon="demo-list-icon" slot="media"/>
  46.   </ListInput>
  48.   <ListInput
  49.     label="Gender"
  50.     type="select"
  51.     defaultValue="Male"
  52.     placeholder="Please choose..."
  53.   >
  54.     <Icon icon="demo-list-icon" slot="media"/>
  55.     <option value="Male">Male</option>
  56.     <option value="Female">Female</option>
  57.   </ListInput>
  59.   <ListInput
  60.     label="Birthday"
  61.     type="date"
  62.     defaultValue="2014-04-30"
  63.     placeholder="Please choose..."
  64.   >
  65.     <Icon icon="demo-list-icon" slot="media"/>
  66.   </ListInput>
  68.   <ListInput
  69.     label="Date time"
  70.     type="datetime-local"
  71.     placeholder="Please choose..."
  72.   >
  73.     <Icon icon="demo-list-icon" slot="media"/>
  74.   </ListInput>
  76.   <ListInput
  77.     label="Range"
  78.     input={false}
  79.   >
  80.     <Icon icon="demo-list-icon" slot="media"/>
  81.     <Range slot="input" value={50} min={0} max={100} step={1}/>
  82.   </ListInput>
  84.   <ListInput
  85.     label="Textarea"
  86.     type="textarea"
  87.     placeholder="Bio"
  88.   >
  89.     <Icon icon="demo-list-icon" slot="media"/>
  90.   </ListInput>
  92.   <ListInput
  93.     label="Resizable"
  94.     type="textarea"
  95.     resizable
  96.     placeholder="Bio"
  97.   >
  98.     <Icon icon="demo-list-icon" slot="media"/>
  99.   </ListInput>
  101. </List>
  103. <BlockTitle>Full Layout / Stacked Labels</BlockTitle>
  104. <List noHairlinesMd>
  105.   <ListInput
  106.     label="Name"
  107.     type="text"
  108.     placeholder="Your name"
  109.     clearButton
  110.   >
  111.     <Icon icon="demo-list-icon" slot="media"/>
  112.   </ListInput>
  114.   <ListInput
  115.     label="Password"
  116.     type="password"
  117.     placeholder="Your password"
  118.     clearButton
  119.   >
  120.     <Icon icon="demo-list-icon" slot="media"/>
  121.   </ListInput>
  123.   <ListInput
  124.     label="E-mail"
  125.     type="email"
  126.     placeholder="Your e-mail"
  127.     clearButton
  128.   >
  129.     <Icon icon="demo-list-icon" slot="media"/>
  130.   </ListInput>
  132.   <ListInput
  133.     label="URL"
  134.     type="url"
  135.     placeholder="URL"
  136.     clearButton
  137.   >
  138.     <Icon icon="demo-list-icon" slot="media"/>
  139.   </ListInput>
  141.   <ListInput
  142.     label="Phone"
  143.     type="tel"
  144.     placeholder="Your phone number"
  145.     clearButton
  146.   >
  147.     <Icon icon="demo-list-icon" slot="media"/>
  148.   </ListInput>
  150.   <ListInput
  151.     label="Gender"
  152.     type="select"
  153.     defaultValue="Male"
  154.     placeholder="Please choose..."
  155.   >
  156.     <Icon icon="demo-list-icon" slot="media"/>
  157.     <option value="Male">Male</option>
  158.     <option value="Female">Female</option>
  159.   </ListInput>
  161.   <ListInput
  162.     label="Birthday"
  163.     type="date"
  164.     defaultValue="2014-04-30"
  165.     placeholder="Please choose..."
  166.   >
  167.     <Icon icon="demo-list-icon" slot="media"/>
  168.   </ListInput>
  170.   <ListInput
  171.     label="Date time"
  172.     type="datetime-local"
  173.     placeholder="Please choose..."
  174.   >
  175.     <Icon icon="demo-list-icon" slot="media"/>
  176.   </ListInput>
  178.   <ListInput
  179.     label="Range"
  180.     input={false}
  181.   >
  182.     <Icon icon="demo-list-icon" slot="media"/>
  183.     <Range slot="input" value={50} min={0} max={100} step={1}/>
  184.   </ListInput>
  186.   <ListInput
  187.     label="Textarea"
  188.     type="textarea"
  189.     placeholder="Bio"
  190.   >
  191.     <Icon icon="demo-list-icon" slot="media"/>
  192.   </ListInput>
  194.   <ListInput
  195.     label="Resizable"
  196.     type="textarea"
  197.     resizable
  198.     placeholder="Bio"
  199.   >
  200.     <Icon icon="demo-list-icon" slot="media"/>
  201.   </ListInput>
  202. </List>
  204. <BlockTitle>Floating Labels (MD-theme only)</BlockTitle>
  205. <List noHairlinesMd>
  206.   <ListInput
  207.     label="Name"
  208.     floatingLabel
  209.     type="text"
  210.     placeholder="Your name"
  211.     clearButton
  212.   >
  213.     <Icon icon="demo-list-icon" slot="media"/>
  214.   </ListInput>
  216.   <ListInput
  217.     label="Password"
  218.     floatingLabel
  219.     type="password"
  220.     placeholder="Your password"
  221.     clearButton
  222.   >
  223.     <Icon icon="demo-list-icon" slot="media"/>
  224.   </ListInput>
  226.   <ListInput
  227.     label="E-mail"
  228.     floatingLabel
  229.     type="email"
  230.     placeholder="Your e-mail"
  231.     clearButton
  232.   >
  233.     <Icon icon="demo-list-icon" slot="media"/>
  234.   </ListInput>
  236.   <ListInput
  237.     label="URL"
  238.     floatingLabel
  239.     type="url"
  240.     placeholder="URL"
  241.     clearButton
  242.   >
  243.     <Icon icon="demo-list-icon" slot="media"/>
  244.   </ListInput>
  246.   <ListInput
  247.     label="Phone"
  248.     floatingLabel
  249.     type="tel"
  250.     placeholder="Your phone number"
  251.     clearButton
  252.   >
  253.     <Icon icon="demo-list-icon" slot="media"/>
  254.   </ListInput>
  256.   <ListInput
  257.     label="Resizable"
  258.     floatingLabel
  259.     type="textarea"
  260.     resizable
  261.     placeholder="Bio"
  262.   >
  263.     <Icon icon="demo-list-icon" slot="media"/>
  264.   </ListInput>
  265. </List>
  267. <BlockTitle>Validation + Additional Info</BlockTitle>
  268. <List noHairlinesMd>
  269.   <ListInput
  270.     label="Name"
  271.     type="text"
  272.     placeholder="Your name"
  273.     info="Default validation"
  274.     required
  275.     validate
  276.     clearButton
  277.   >
  278.     <Icon icon="demo-list-icon" slot="media"/>
  279.   </ListInput>
  281.   <ListInput
  282.     label="Fruit"
  283.     type="text"
  284.     placeholder="Type 'apple' or 'banana'"
  285.     required
  286.     validate
  287.     pattern="apple|banana"
  288.     clearButton
  289.   >
  290.     <Icon icon="demo-list-icon" slot="media"/>
  291.     <span slot="info">Pattern validation (<b>apple|banana</b>)</span>
  292.   </ListInput>
  294.   <ListInput
  295.     label="E-mail"
  296.     type="email"
  297.     placeholder="Your e-mail"
  298.     info="Default e-mail validation"
  299.     required
  300.     validate
  301.     clearButton
  302.   >
  303.     <Icon icon="demo-list-icon" slot="media"/>
  304.   </ListInput>
  306.   <ListInput
  307.     label="URL"
  308.     type="url"
  309.     placeholder="Your URL"
  310.     info="Default URL validation"
  311.     required
  312.     validate
  313.     clearButton
  314.   >
  315.     <Icon icon="demo-list-icon" slot="media"/>
  316.   </ListInput>
  318.   <ListInput
  319.     label="Number"
  320.     type="text"
  321.     placeholder="Enter number"
  322.     info="With custom error message"
  323.     errorMessage="Only numbers please!"
  324.     required
  325.     validate
  326.     pattern="[0-9]*"
  327.     clearButton
  328.   >
  329.     <Icon icon="demo-list-icon" slot="media"/>
  330.   </ListInput>
  332. </List>
  334. <BlockTitle>Icon + Input</BlockTitle>
  335. <List noHairlinesMd>
  336.   <ListInput
  337.     type="text"
  338.     placeholder="Your name"
  339.     clearButton
  340.   >
  341.     <Icon icon="demo-list-icon" slot="media"/>
  342.   </ListInput>
  344.   <ListInput
  345.     type="password"
  346.     placeholder="Your password"
  347.     clearButton
  348.   >
  349.     <Icon icon="demo-list-icon" slot="media"/>
  350.   </ListInput>
  352.   <ListInput
  353.     type="email"
  354.     placeholder="Your e-mail"
  355.     clearButton
  356.   >
  357.     <Icon icon="demo-list-icon" slot="media"/>
  358.   </ListInput>
  360.   <ListInput
  361.     type="url"
  362.     placeholder="URL"
  363.     clearButton
  364.   >
  365.     <Icon icon="demo-list-icon" slot="media"/>
  366.   </ListInput>
  368. </List>
  370. <BlockTitle>Label + Input</BlockTitle>
  371. <List noHairlinesMd>
  372.   <ListInput
  373.     label="Name"
  374.     type="text"
  375.     placeholder="Your name"
  376.     clearButton
  377.   />
  379.   <ListInput
  380.     label="Password"
  381.     type="password"
  382.     placeholder="Your password"
  383.     clearButton
  384.   />
  386.   <ListInput
  387.     label="E-mail"
  388.     type="email"
  389.     placeholder="Your e-mail"
  390.     clearButton
  391.   />
  393.   <ListInput
  394.     label="URL"
  395.     type="url"
  396.     placeholder="URL"
  397.     clearButton
  398.   />
  399. </List>
  401. <BlockTitle>Only Inputs</BlockTitle>
  402. <List noHairlinesMd>
  403.   <ListInput
  404.     type="text"
  405.     placeholder="Your name"
  406.     clearButton
  407.   />
  409.   <ListInput
  410.     type="password"
  411.     placeholder="Your password"
  412.     clearButton
  413.   />
  415.   <ListInput
  416.     type="email"
  417.     placeholder="Your e-mail"
  418.     clearButton
  419.   />
  421.   <ListInput
  422.     type="url"
  423.     placeholder="URL"
  424.     clearButton
  425.   />
  426. </List>
  428. <BlockTitle>Inputs + Additional Info</BlockTitle>
  429. <List noHairlinesMd>
  430.   <ListInput
  431.     type="text"
  432.     placeholder="Your name"
  433.     info="Full name please"
  434.     clearButton
  435.   />
  437.   <ListInput
  438.     type="password"
  439.     placeholder="Your password"
  440.     info="8 characters minimum"
  441.     clearButton
  442.   />
  444.   <ListInput
  445.     type="email"
  446.     placeholder="Your e-mail"
  447.     info="Your work e-mail address"
  448.     clearButton
  449.   />
  451.   <ListInput
  452.     type="url"
  453.     placeholder="URL"
  454.     info="Your website URL"
  455.     clearButton
  456.   />
  457. </List>
  459. <BlockTitle>Only Inputs Inset</BlockTitle>
  460. <List inset>
  461.   <ListInput
  462.     type="text"
  463.     placeholder="Your name"
  464.     clearButton
  465.   />
  467.   <ListInput
  468.     type="password"
  469.     placeholder="Your password"
  470.     clearButton
  471.   />
  473.   <ListInput
  474.     type="email"
  475.     placeholder="Your e-mail"
  476.     clearButton
  477.   />
  479.   <ListInput
  480.     type="url"
  481.     placeholder="URL"
  482.     clearButton
  483.   />
  484. </List>