Language: ENCN

Form Elements Vue Components

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

Check out Framework7's Form Elements for their appearance.

Usage examples

<f7-list form>
  <!-- Text Input -->
  <f7-list-item>
    <f7-label>Name</f7-label>
    <f7-input type="text" placeholder="Name"/>
  </f7-list-item>
  <!-- Password -->
  <f7-list-item>
    <f7-label>Name</f7-label>
    <f7-input type="password" placeholder="Password"/>
  </f7-list-item>
  <!-- Select -->
  <f7-list-item>
    <f7-label>Gender</f7-label>
    <f7-input type="select">
      <option value="1">Male</option>
      <option value="1">Female</option>
    </f7-input>
  </f7-list-item>
  <!-- Switch -->
  <f7-list-item>
    <f7-label>Switch</f7-label>
    <f7-input type="switch" @change="onChange"></f7-input>
  </f7-list-item>
  <!-- Range -->
  <f7-list-item>
    <f7-label>Range</f7-label>
    <f7-input type="range" min="0" max="100" step="1" value="90"></f7-input>
  </f7-list-item>
  <!-- Textarea -->
  <f7-list-item>
    <f7-label>Textarea</f7-label>
    <f7-input type="textarea" placeholder="Textarea"></f7-input>
  </f7-list-item>
</f7-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)

<f7-list form>
  <!-- Text Input -->
  <f7-list-item>
    <f7-label floating>Name</f7-label>
    <f7-input type="text" placeholder="Name"/>
  </f7-list-item>
  <!-- Password -->
  <f7-list-item>
    <f7-label floating>Name</f7-label>
    <f7-input type="password" placeholder="Password"/>
  </f7-list-item>
  ...
</f7-list>

Without labels

<f7-list form>
  <!-- Text Input -->
  <f7-list-item>
    <f7-input type="text" placeholder="Name"/>
  </f7-list-item>
  <!-- Password -->
  <f7-list-item>
    <f7-input type="password" placeholder="Password"/>
  </f7-list-item>
  ...
</f7-list>

With Labels and Icons

<f7-list form>
  <!-- Text Input -->
  <f7-list-item>
    <f7-icon slot="media" f7="person"></f7-icon>
    <f7-label floating>Name</f7-label>
    <f7-input type="text" placeholder="Name"/>
  </f7-list-item>
  <!-- Password -->
  <f7-list-item>
    <f7-icon slot="media" f7="lock"></f7-icon>
    <f7-label floating>Name</f7-label>
    <f7-input type="password" placeholder="Password"/>
  </f7-list-item>
  ...
</f7-list>

Properties

Prop Type Default Description
<f7-label> properties
floating boolean Enables floating label (affects Material theme only)
<f7-input> 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
size/number 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

Events

Event Description
<f7-input> events
focus Fired when user focused to input.
focusin Fired when an element is about to receive focus. The main difference between this event and focus is that the latter doesn't bubble.
blur Fired when user lost focus from input.
focusout Fired when an element is about to lose focus. The main difference between this event and blur is that the latter doesn't bubble.
beforeinput Fired before input value change.
input Fired immediately when input value changed. Note: Input event triggers after beforeinput, keypress, keyup, keydown events.
change Fired when blur if value changed.
keypress You can use this event and @keydown event for prevent input. @keypress event fired after keydown and before keyup.

You can use like this too:@keypress.enter="alert('User pressed enter key.')"

For more information:https://vuejs.org/v2/guide/events.html#Key-Modifiers

keyup Fired when user released the keyboard button.
keydown Fired when user starts pressing to the keyboard button.
compositionstart 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).
compositionupdate 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).
compositionend Fired when the composition of a passage of text has been completed or cancelled.
click Fired when clicked to input.
dblclick Fired when double clicked to input.
mousedown Fired when a pointing device button (usually a mouse button) is pressed on an element.
mouseup Fired when a pointing device button (usually a mouse button) is released over an element.
mouseenter Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.

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

mouseover Fired when a pointing device is moved onto the element that has the listener attached or onto one of its children.
mouseleave Fired when a pointing device (usually a mouse) is moved off the element that has the listener attached.
mouseout 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.
mousemove Fired when a pointing device (usually a mouse) is moved while over an element.
wheel Fired when a wheel button of a pointing device (usually a mouse) is rotated. This event replaces the non-standard deprecated mousewheel event.
select 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.