-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Input / 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 additional components.
Check out Framework7's Inputs / Form Elements for their appearance.
Input Components
There are following components included:
f7-input
- input elementf7-label
- input label element
Input Properties
Prop | Type | Default | Description |
---|---|---|---|
<f7-label> properties | |||
floating | boolean | false | Enables floating label (affects MD theme only) |
inline | boolean | false | Makes label inline |
<f7-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:
|
|
resizable | boolean | false | Makes textarea resizable |
inputStyle | string | Value if input's "style" attribute, in case you need to pass extra styles | |
clear-button | 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 |
error-message | string | Custom error message to show when input value is invalid | |
info | string | Custom additional text with information about input | |
name | string | Input name | |
placeholder | string | Input placeholder | |
id | string | Input ID attribute | |
value | string number |
Input value | |
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 |
Input Events
Event | Arguments | Description |
---|---|---|
<f7-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. |
input:clear | (event) | Fired when input clear button clicked |
textarea:resize | (event) | Fired if resizable textarea resized. event.detail will contain object with the initialHeight , currentHeight and scrollHeight properties |
input:empty | (event) | Fired when input value becomes empty |
input:notempty | (event) | Fired when input value becomes not empty |
Input Slots
Input Vue component (<f7-input>
) has additional slots for custom elements:
default
- in case oftype="select"
ortype="textarea"
- element will be placed inside ofselect
ortextarea
tags. Otherwise, it will be placed instead of input elementinfo
- element will be inserted in<div class="input-info">
element
Input v-model
v-model
is not supported on f7-input
vue component. Instead, just use the combination of value
property and @input
event:
<template>
...
<f7-list-item>
<f7-label>Name</f7-label>
<f7-input type="text" :value="name" @input="name = $event.target.value" placeholder="Your name" clear-button></f7-input>
</f7-list-item>
...
</template>
<script>
export default {
data() {
name: '',
},
...
};
</script>
Examples
Full Layout / Inline Labels
<f7-list inline-labels no-hairlines-md>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Name</f7-label>
<f7-input type="text" placeholder="Your name" :value="value" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Password</f7-label>
<f7-input type="password" placeholder="Your password" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>E-mail</f7-label>
<f7-input type="email" placeholder="Your e-mail" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>URL</f7-label>
<f7-input type="url" placeholder="URL" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Phone</f7-label>
<f7-input type="tel" placeholder="Your phone number" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Gender</f7-label>
<f7-input type="select" placeholder="Please choose...">
<option value="Male">Male</option>
<option value="Female">Female</option>
</f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Birthday</f7-label>
<f7-input type="date" value="2014-04-30" placeholder="Please choose..."></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Date time</f7-label>
<f7-input type="datetime-local" placeholder="Please choose..."></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Range</f7-label>
<f7-input type="range" value="50" min="0" max="100" step="1"></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Textarea</f7-label>
<f7-input type="textarea" placeholder="Bio"></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Resizable</f7-label>
<f7-input type="textarea" resizable placeholder="Bio"></f7-input>
</f7-list-item>
</f7-list>
Full Layout / Stacked Labels
<f7-list no-hairlines-md>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Name</f7-label>
<f7-input type="text" placeholder="Your name" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Password</f7-label>
<f7-input type="password" placeholder="Your password" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>E-mail</f7-label>
<f7-input type="email" placeholder="Your e-mail" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>URL</f7-label>
<f7-input type="url" placeholder="URL" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Phone</f7-label>
<f7-input type="tel" placeholder="Your phone number" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Gender</f7-label>
<f7-input type="select" placeholder="Please choose...">
<option value="Male">Male</option>
<option value="Female">Female</option>
</f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Birthday</f7-label>
<f7-input type="date" value="2014-04-30" placeholder="Please choose..."></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Date time</f7-label>
<f7-input type="datetime-local" placeholder="Please choose..."></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Range</f7-label>
<f7-input type="range" value="50" min="0" max="100" step="1"></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Textarea</f7-label>
<f7-input type="textarea" placeholder="Bio"></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Resizable</f7-label>
<f7-input type="textarea" resizable placeholder="Bio"></f7-input>
</f7-list-item>
</f7-list>
Floating Labels (MD-theme only)
<f7-list no-hairlines-md>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label floating>Name</f7-label>
<f7-input type="text" placeholder="Your name" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label floating>Password</f7-label>
<f7-input type="password" placeholder="Your password" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label floating>E-mail</f7-label>
<f7-input type="email" placeholder="Your e-mail" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label floating>URL</f7-label>
<f7-input type="url" placeholder="URL" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label floating>Phone</f7-label>
<f7-input type="tel" placeholder="Your phone number" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label floating>Bio</f7-label>
<f7-input type="textarea" placeholder="Bio" resizable></f7-input>
</f7-list-item>
</f7-list>
Validation + Additional Info
<f7-list no-hairlines-md>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Name</f7-label>
<f7-input type="text" placeholder="Your name" info='Default "required" validation' required validate clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Fruit</f7-label>
<f7-input type="text" placeholder="Type 'apple' or 'banana'" required validate clear-button>
<span slot="info">Pattern validation (<b>apple|banana</b>)</span>
</f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>E-mail</f7-label>
<f7-input type="email" placeholder="Your e-mail" info='Default e-mail validation' required validate clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>URL</f7-label>
<f7-input type="url" placeholder="Your URL" info='Default URL validation' required validate clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-label>Number</f7-label>
<f7-input type="text" placeholder="Enter number" info='With custom error message' error-message="Only numbers please!" required validate pattern="[0-9]*" clear-button></f7-input>
</f7-list-item>
</f7-list>
Icon + Input
<f7-list no-hairlines-md>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-input type="text" placeholder="Your name" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-input type="password" placeholder="Your password" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-input type="email" placeholder="Your e-mail" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-icon icon="demo-list-icon" slot="media"></f7-icon>
<f7-input type="url" placeholder="URL" clear-button></f7-input>
</f7-list-item>
</f7-list>
Label + Input
<f7-list no-hairlines-md>
<f7-list-item>
<f7-label>Name</f7-label>
<f7-input type="text" placeholder="Your name" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-label>Password</f7-label>
<f7-input type="password" placeholder="Your password" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-label>E-mail</f7-label>
<f7-input type="email" placeholder="Your e-mail" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-label>URL</f7-label>
<f7-input type="url" placeholder="URL" clear-button></f7-input>
</f7-list-item>
</f7-list>
Only Inputs
<f7-list no-hairlines-md>
<f7-list-item>
<f7-input type="text" placeholder="Your name" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-input type="password" placeholder="Your password" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-input type="email" placeholder="Your e-mail" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-input type="url" placeholder="URL" clear-button></f7-input>
</f7-list-item>
</f7-list>
Inputs + Additional Info
<f7-list no-hairlines-md>
<f7-list-item>
<f7-input type="text" placeholder="Your name" info="Full name please" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-input type="password" placeholder="Your password" info="8 characters minimum" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-input type="email" placeholder="Your e-mail" info="Your work e-mail address" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-input type="url" placeholder="URL" info="Your website URL" clear-button></f7-input>
</f7-list-item>
</f7-list>
Only Inputs Inset
<f7-list inset>
<f7-list-item>
<f7-input type="text" placeholder="Your name" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-input type="password" placeholder="Your password" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-input type="email" placeholder="Your e-mail" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
<f7-input type="url" placeholder="URL" clear-button></f7-input>
</f7-list-item>
</f7-list>