Get Started
Vue Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
- Forms
  - Checkboxes & Radios
  - Form Elements
  - Smart Select
- Icon
- Grid / Layout Grid
- Lists
  - List
  - List Item
  - List Button
  - Accordion List
  - Contacts List
  - Sortable List
  - Swipeout List
  - Virtual List
- Link
- Messages
- Message Bar
- Modals
  - Action Sheet
  - Login Screen
  - Picker Modal
  - Popover
  - Popup
- Navigation Bars
  - Navbar
  - Toolbar/Tabbar
  - Sub Navbar
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View

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
resizable	boolean		Makes textarea resizable
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
inputStyle	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.