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

Prop Type Default Description
<ListInput> properties
id string Wrapping element ID attribute
media string List item media image URL
label string Input's label text
inlineLabel boolean false Makes label inline
floatingLabel boolean false Enables floating label (affects MD theme only)
input boolean true Whether it should render input element or not. Disable if you want to use custom input inside.
type string Input type. All default HTML5 input type, and few special ones:
  • textarea - to render textarea element
  • select - to render select element
resizable boolean false Makes textarea resizable
inputStyle object Value of input's "style" attribute, in case you need to pass extra styles
clearButton boolean false Adds input clear button that will clear input value on click
validate boolean false When 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.
errorMessage string Custom error message to show when input value is invalid
errorMessageForce boolean false Force error message to force. Useful in case you use custom validation and want to show/hide error message when you need it
info string Custom additional text with information about input
name string Input name
placeholder string Input placeholder
id string Wrapping element ID attribute
inputId string Input element ID attribute
value string
number
Input value
defaultValue string
number
Input value, in case of uncontrolled component
size string
number
Value of input's native "size" attribute
pattern string Value of input's native "pattern" attribute
accept string
number
Value of input's native "accept" attribute
autocomplete string Value of input's native "autocomplete" attribute
autofocus boolean false Value of input's native "autofocus" attribute
autosave string Value of input's native "autosave" attribute
checked boolean false Marks input as checked
disabled boolean false Marks input as disabled
max string
number
Value of input's native "max" attribute
min string
number
Value of input's native "min" attribute
step string
number
Value of input's native "step" attribute
maxlength string
number
Value of input's native "maxlength" attribute
minlength string
number
Value of input's native "minlength" attribute
multiple boolean false Value of input's native "multiple" attribute
readonly boolean false Marks input as readonly
required boolean false Marks input as required
tabindex string
number
Value of input's native "tabindex" attribute
noStoreData boolean false Allows to ignore input value to be stored when using with Form Storage
ignoreStoreData boolean false Same as previous
<Label> properties
floating boolean false Enables floating label (affects MD theme only)
inline boolean false Makes label inline
<Input> properties
wrap boolean true Defines should the input be wraped with "item-input-wrap" element or not. Must be disabled when using outside of List View
type string Input type. All default HTML5 input type, and few special ones:
  • textarea - to render textarea element
  • select - to render select element
resizable boolean false Makes textarea resizable
inputStyle object Value of input's "style" attribute, in case you need to pass extra styles
clearButton boolean false Adds input clear button that will clear input value on click
validate boolean false When 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.
errorMessage string Custom error message to show when input value is invalid
errorMessageForce boolean false Force error message to force. Useful in case you use custom validation and want to show/hide error message when you need it
info string Custom additional text with information about input
name string Input name
placeholder string Input placeholder
id string Wrapping element ID attribute
inputId string Input element ID attribute
value string
number
Input value
defaultValue string
number
Input value, in case of uncontrolled component
size string
number
Value of input's native "size" attribute
pattern string Value of input's native "pattern" attribute
accept string
number
Value of input's native "accept" attribute
autocomplete string Value of input's native "autocomplete" attribute
autofocus boolean false Value of input's native "autofocus" attribute
autosave string Value of input's native "autosave" attribute
checked boolean false Marks input as checked
disabled boolean false Marks input as disabled
max string
number
Value of input's native "max" attribute
min string
number
Value of input's native "min" attribute
step string
number
Value of input's native "step" attribute
maxlength string
number
Value of input's native "maxlength" attribute
minlength string
number
Value of input's native "minlength" attribute
multiple boolean false Value of input's native "multiple" attribute
readonly boolean false Marks input as readonly
required boolean false Marks input as required
tabindex string
number
Value of input's native "tabindex" attribute
noStoreData boolean false Allows to ignore input value to be stored when using with Form Storage
ignoreStoreData boolean false Same as previous

Input Events

Event Arguments Description
<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

<BlockTitle>Full Layout / Inline Labels</BlockTitle>
<List inlineLabels noHairlinesMd>
  <ListInput
    label="Name"
    type="text"
    placeholder="Your name"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Password"
    type="password"
    placeholder="Your password"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="E-mail"
    type="email"
    placeholder="Your e-mail"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="URL"
    type="url"
    placeholder="URL"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Phone"
    type="tel"
    placeholder="Your phone number"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Gender"
    type="select"
    defaultValue="Male"
    placeholder="Please choose..."
  >
    <Icon icon="demo-list-icon" slot="media"/>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </ListInput>

  <ListInput
    label="Birthday"
    type="date"
    defaultValue="2014-04-30"
    placeholder="Please choose..."
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Date time"
    type="datetime-local"
    placeholder="Please choose..."
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Range"
    input={false}
  >
    <Icon icon="demo-list-icon" slot="media"/>
    <Range slot="input" value={50} min={0} max={100} step={1}/>
  </ListInput>

  <ListInput
    label="Textarea"
    type="textarea"
    placeholder="Bio"
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Resizable"
    type="textarea"
    resizable
    placeholder="Bio"
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

</List>

<BlockTitle>Full Layout / Stacked Labels</BlockTitle>
<List noHairlinesMd>
  <ListInput
    label="Name"
    type="text"
    placeholder="Your name"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Password"
    type="password"
    placeholder="Your password"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="E-mail"
    type="email"
    placeholder="Your e-mail"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="URL"
    type="url"
    placeholder="URL"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Phone"
    type="tel"
    placeholder="Your phone number"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Gender"
    type="select"
    defaultValue="Male"
    placeholder="Please choose..."
  >
    <Icon icon="demo-list-icon" slot="media"/>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </ListInput>

  <ListInput
    label="Birthday"
    type="date"
    defaultValue="2014-04-30"
    placeholder="Please choose..."
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Date time"
    type="datetime-local"
    placeholder="Please choose..."
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Range"
    input={false}
  >
    <Icon icon="demo-list-icon" slot="media"/>
    <Range slot="input" value={50} min={0} max={100} step={1}/>
  </ListInput>

  <ListInput
    label="Textarea"
    type="textarea"
    placeholder="Bio"
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Resizable"
    type="textarea"
    resizable
    placeholder="Bio"
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>
</List>

<BlockTitle>Floating Labels (MD-theme only)</BlockTitle>
<List noHairlinesMd>
  <ListInput
    label="Name"
    floatingLabel
    type="text"
    placeholder="Your name"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Password"
    floatingLabel
    type="password"
    placeholder="Your password"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="E-mail"
    floatingLabel
    type="email"
    placeholder="Your e-mail"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="URL"
    floatingLabel
    type="url"
    placeholder="URL"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Phone"
    floatingLabel
    type="tel"
    placeholder="Your phone number"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Resizable"
    floatingLabel
    type="textarea"
    resizable
    placeholder="Bio"
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>
</List>

<BlockTitle>Validation + Additional Info</BlockTitle>
<List noHairlinesMd>
  <ListInput
    label="Name"
    type="text"
    placeholder="Your name"
    info="Default validation"
    required
    validate
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Fruit"
    type="text"
    placeholder="Type 'apple' or 'banana'"
    required
    validate
    pattern="apple|banana"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
    <span slot="info">Pattern validation (<b>apple|banana</b>)</span>
  </ListInput>

  <ListInput
    label="E-mail"
    type="email"
    placeholder="Your e-mail"
    info="Default e-mail validation"
    required
    validate
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="URL"
    type="url"
    placeholder="Your URL"
    info="Default URL validation"
    required
    validate
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    label="Number"
    type="text"
    placeholder="Enter number"
    info="With custom error message"
    errorMessage="Only numbers please!"
    required
    validate
    pattern="[0-9]*"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

</List>

<BlockTitle>Icon + Input</BlockTitle>
<List noHairlinesMd>
  <ListInput
    type="text"
    placeholder="Your name"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    type="password"
    placeholder="Your password"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    type="email"
    placeholder="Your e-mail"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

  <ListInput
    type="url"
    placeholder="URL"
    clearButton
  >
    <Icon icon="demo-list-icon" slot="media"/>
  </ListInput>

</List>

<BlockTitle>Label + Input</BlockTitle>
<List noHairlinesMd>
  <ListInput
    label="Name"
    type="text"
    placeholder="Your name"
    clearButton
  />

  <ListInput
    label="Password"
    type="password"
    placeholder="Your password"
    clearButton
  />

  <ListInput
    label="E-mail"
    type="email"
    placeholder="Your e-mail"
    clearButton
  />

  <ListInput
    label="URL"
    type="url"
    placeholder="URL"
    clearButton
  />
</List>

<BlockTitle>Only Inputs</BlockTitle>
<List noHairlinesMd>
  <ListInput
    type="text"
    placeholder="Your name"
    clearButton
  />

  <ListInput
    type="password"
    placeholder="Your password"
    clearButton
  />

  <ListInput
    type="email"
    placeholder="Your e-mail"
    clearButton
  />

  <ListInput
    type="url"
    placeholder="URL"
    clearButton
  />
</List>

<BlockTitle>Inputs + Additional Info</BlockTitle>
<List noHairlinesMd>
  <ListInput
    type="text"
    placeholder="Your name"
    info="Full name please"
    clearButton
  />

  <ListInput
    type="password"
    placeholder="Your password"
    info="8 characters minimum"
    clearButton
  />

  <ListInput
    type="email"
    placeholder="Your e-mail"
    info="Your work e-mail address"
    clearButton
  />

  <ListInput
    type="url"
    placeholder="URL"
    info="Your website URL"
    clearButton
  />
</List>

<BlockTitle>Only Inputs Inset</BlockTitle>
<List inset>
  <ListInput
    type="text"
    placeholder="Your name"
    clearButton
  />

  <ListInput
    type="password"
    placeholder="Your password"
    clearButton
  />

  <ListInput
    type="email"
    placeholder="Your e-mail"
    clearButton
  />

  <ListInput
    type="url"
    placeholder="URL"
    clearButton
  />
</List>