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