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 extensions.

Check out Framework7's Form Elements for their appearance.

Usage examples

<List form>
  <!-- Text Input -->
  <ListItem>
    <FormLabel>Name</FormLabel>
    <FormInput type="text" placeholder="Name"/>
  </ListItem>
  <!-- Password -->
  <ListItem>
    <FormLabel>Name</FormLabel>
    <FormInput type="password" placeholder="Password"/>
  </ListItem>
  <!-- Select -->
  <ListItem>
    <FormLabel>Gender</FormLabel>
    <FormInput type="select">
      <option value="1">Male</option>
      <option value="1">Female</option>
    </FormInput>
  </ListItem>
  <!-- Switch -->
  <ListItem>
    <FormLabel>Switch</FormLabel>
    <FormInput type="switch" onChange={onChange}></FormInput>
  </ListItem>
  <!-- Range -->
  <ListItem>
    <FormLabel>Range</FormLabel>
    <FormInput type="range" min="0" max="100" step="1" value="90"></FormInput>
  </ListItem>
  <!-- Textarea -->
  <ListItem>
    <FormLabel>Textarea</FormLabel>
    <FormInput type="textarea" placeholder="Textarea"></FormInput>
  </ListItem>
</List>

Renders to:

<form class="list-block">
  <ul>
    <!-- Text Input -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Name</div>
          <div class="item-input">
            <input type="text" placeholder="Name"></div>
        </div>
      </div>
    </li>
    <!-- Password -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Password</div>
          <div class="item-input">
            <input type="password" placeholder="Password"></div>
        </div>
      </div>
    </li>
    <!-- Select -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Gender</div>
          <div class="item-input">
            <select type="select">
              <option value="1">Male</option>
              <option value="1">Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <!-- Switch -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Switch</div>
          <div class="item-input">
            <label class="label-switch">
              <input type="checkbox" value="">
              <div class="checkbox"></div>
            </label>
          </div>
        </div>
      </div>
    </li>
    <!-- Range -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Range</div>
          <div class="item-input">
            <div class="range-slider">
              <input type="range" max="100" min="0" step="1"></div>
          </div>
        </div>
      </div>
    </li>
    <!-- Textarea -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Textarea</div>
          <div class="item-input">
            <textarea type="textarea" placeholder="Textarea"></textarea>
          </div>
        </div>
      </div>
    </li>
  </ul>
</form>

Floating Labels (Material Theme only)

<List form>
  <!-- Text Input -->
  <ListItem>
    <FormLabel floating>Name</FormLabel>
    <FormInput type="text" placeholder="Name"/>
  </ListItem>
  <!-- Password -->
  <ListItem>
    <FormLabel floating>Name</FormLabel>
    <FormInput type="password" placeholder="Password"/>
  </ListItem>
  ...
</List>

Without labels

<List form>
  <!-- Text Input -->
  <ListItem>
    <FormInput type="text" placeholder="Name"/>
  </ListItem>
  <!-- Password -->
  <ListItem>
    <FormInput type="password" placeholder="Password"/>
  </ListItem>
  ...
</List>

With Labels and Icons

<List form>
  <!-- Text Input -->
  <ListItem>
    <Icon slot="media" f7="person"></Icon>
    <FormLabel floating>Name</FormLabel>
    <FormInput type="text" placeholder="Name"/>
  </ListItem>
  <!-- Password -->
  <ListItem>
    <Icon slot="media" f7="lock"></Icon>
    <FormLabel floating>Name</FormLabel>
    <FormInput type="password" placeholder="Password"/>
  </ListItem>
  ...
</List>

Properties

Prop Type Default Description
<FormLabel> properties
floating boolean Enables floating label (affects Material theme only)
<FormInput> properties
type string Input type. All default HTML5 input type, and few special ones:
  • textarea - to render textarea element
  • select - to render select element
  • range - to render range slider
  • switch - to render switch element
name string Input name
placeholder string Input placeholder
id string Input ID attribute
value string/number Input value
sizeNumber string 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 Value of input's native "autofocus" attribute
autosave string Value of input's native "autosave" atribute
checked boolean Marks input as checked
disabled boolean Marks input as disabled
max string/number Value of input's native "max" atribute
min string/number Value of input's native "min" atribute
step string/number Value of input's native "step" atribute
maxlength string/number Value of input's native "maxlength" atribute
minlength string/number Value of input's native "minlength" atribute
multiple boolean Value of input's native "multiple" atribute
readonly boolean Marks input as readonly
required boolean Marks input as required
style string Value if input's "style" attribute
color string Input color. One of default colors
wrap boolean true Defines should the input be wraped with "item-input" element or not

Event Properties

Event Description
<FormInput> events
onFocus Fired when user focused to input.
onFocusin Fired when an element is about to receive focus. The main difference between this event and focus is that the latter doesn't bubble.
onBlur Fired when user lost focus from input.
onFocusout Fired when an element is about to lose focus. The main difference between this event and blur is that the latter doesn't bubble.
onBeforeinput Fired before input value change.
onInput Fired immediately when input value changed. Note: Input event triggers after beforeinput, keypress, keyup, keydown events.
onChange Fired when blur if value changed.
onOnkeypress You can use this event and onKeydown event for prevent input. onKeypress event fired after keydown and before keyup.
onKeyup Fired when user released the keyboard button.
onKeydown Fired when user starts pressing to the keyboard button.
onCompositionstart Fired when the composition of a passage of text is prepared (similar to keydown for a keyboard input, but fires with special characters that require a sequence of keys and other inputs such as speech recognition or word suggestion on mobile).
onCompositionupdate Fired when a character is added to a passage of text being composed (fires with special characters that require a sequence of keys and other inputs such as speech recognition or word suggestion on mobile).
onCompositionend Fired when the composition of a passage of text has been completed or cancelled.
onClick Fired when clicked to input.
onDblclick Fired when double clicked to input.
onMousedown Fired when a pointing device button (usually a mouse button) is pressed on an element.
onMouseup Fired when a pointing device button (usually a mouse button) is released over an element.
onMouseenter Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.

onMouseenter and onMouseover events are different. For more info:https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter

onMouseover Fired when a pointing device is moved onto the element that has the listener attached or onto one of its children.
onMouseleave Fired when a pointing device (usually a mouse) is moved off the element that has the listener attached.
onMouseout Fired when a pointing device (usually a mouse) is moved off the element that has the listener attached or off one of its children. Note that it is also triggered on the parent when you move onto a child element, since you move out of the visible space of the parent.
onMousemove Fired when a pointing device (usually a mouse) is moved while over an element.
onWheel Fired when a wheel button of a pointing device (usually a mouse) is rotated. This event replaces the non-standard deprecated mousewheel event.
onSelect Fired when some text is being selected. The event might not be available for all elements in all languages. For example, select events can be dispatched only on form input and textarea elements.