我的书签
添加书签
移除书签
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-list-input**- list item input element**f7-input**- input element**f7-label**- input label element
Since Framework7 3.5.0 it is highly recommended that you only use **f7-list-input** component. It combines f7-list-item, f7-label and f7-input components in one component and provides much better and more correct input’s state handling.
Input Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| <f7-list-input> properties | |||
| --- | --- | --- | --- |
| id | string | Wrapping element ID attribute | |
| media | string | List item media image URL | |
| label | string | Input’s label text | |
| inline-label | boolean | false | Makes label inline |
| floating-label | boolean | false | Enables floating label (affects MD theme only) |
| input | boolean | true | Whether it should render input element or not. Disable if you want to use custom input inside. |
| type | string | Input type. All default HTML5 input type, and few special ones: - textarea - to render textarea element - select - to render select element | |
| resizable | boolean | false | Makes textarea resizable |
| inputStyle | string object | Value of 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. If you use custom validation and need more control on where to show/hide error message, then it is better to disable validation and use error-message together with error-message-force props. |
| error-message | string | Custom error message to show when input value is invalid | |
| error-message-force | boolean | false | Force error message to force. Useful in case you use custom validation and want to show/hide error message when you need it |
| info | string | Custom additional text with information about input | |
| name | string | Input name | |
| placeholder | string | Input placeholder | |
| input-id | string | Input element ID attribute | |
| value | string number | Input value | |
| default-value | string number | Input value, in case of uncontrolled component | |
| 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 | |
| no-store-data | boolean | false | Allows to ignore input value to be stored when using with Form Storage |
| ignore-store-data | boolean | false | Same as previous |
| <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: - textarea - to render textarea element - select - to render select element | |
| resizable | boolean | false | Makes textarea resizable |
| inputStyle | string object | Value of 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. If you use custom validation and need more control on where to show/hide error message, then it is better to disable validation and use error-message together with error-message-force props. |
| error-message | string | Custom error message to show when input value is invalid | |
| error-message-force | boolean | false | Force error message to force. Useful in case you use custom validation and want to show/hide error message when you need it |
| info | string | Custom additional text with information about input | |
| name | string | Input name | |
| placeholder | string | Input placeholder | |
| id | string | Wrapping element ID attribute | |
| input-id | string | Input element 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 | |
| no-store-data | boolean | false | Allows to ignore input value to be stored when using with Form Storage |
| ignore-store-data | boolean | false | Same as previous |
Input Events
| Event | Arguments | Description |
|---|---|---|
| <f7-list-input>, <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-list-input>) has additional slots for custom elements:
**default**- in case oftype="select"ortype="textarea"- element will be placed inside ofselectortextareatags.**info**- element will be inserted into container with info message**error-message**- element will be inserted into container with error message**label**- element will be inserted into container with input’s label**input**- element will be inserted instead of input element (inputprop must be also set tofalse)**root-start**- element will be inserted in the beginning of<li>element**root**/**root-end**- element will be inserted in the end of<li>element**content-start**- element will be inserted in the beginning of<div class="item-content">element**content**/**content-end**- element will be inserted in the end of<div class="item-content">element**inner-start**- element will be inserted in the beginning of<div class="item-inner">element**inner**/**inner-end**- element will be inserted in the end of<div class="item-inner">element**media**- element will be inserted inside of<div class="item-media">element
Input v-model
v-model is not supported on f7-list-input / f7-input vue components. Instead, just use the combination of value property and @input event:
1. <template>
2. ...
3. <f7-list-input
4. label="Name"
5. type="text"
6. :value="name"
7. @input="name = $event.target.value"
8. placeholder="Your name"
9. clear-button
10. ></f7-list-input>
11. ...
12. </template>
13. <script>
14. export default {
15. data() {
16. name: '',
17. },
18. ...
19. };
20. </script>
Examples
1. <f7-block-title>Full Layout / Inline Labels</f7-block-title>
2. <f7-list inline-labels no-hairlines-md>
3. <f7-list-input
4. label="Name"
5. type="text"
6. placeholder="Your name"
7. clear-button
8. >
9. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
10. </f7-list-input>
12. <f7-list-input
13. label="Password"
14. type="password"
15. placeholder="Your password"
16. clear-button
17. >
18. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
19. </f7-list-input>
21. <f7-list-input
22. label="E-mail"
23. type="email"
24. placeholder="Your e-mail"
25. clear-button
26. >
27. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
28. </f7-list-input>
30. <f7-list-input
31. label="URL"
32. type="url"
33. placeholder="URL"
34. clear-button
35. >
36. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
37. </f7-list-input>
39. <f7-list-input
40. label="Phone"
41. type="tel"
42. placeholder="Your phone number"
43. clear-button
44. >
45. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
46. </f7-list-input>
48. <f7-list-input
49. label="Gender"
50. type="select"
51. defaultValue="Male"
52. placeholder="Please choose..."
53. >
54. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
55. <option value="Male">Male</option>
56. <option value="Female">Female</option>
57. </f7-list-input>
59. <f7-list-input
60. label="Birthday"
61. type="date"
62. defaultValue="2014-04-30"
63. placeholder="Please choose..."
64. >
65. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
66. </f7-list-input>
68. <f7-list-input
69. label="Date time"
70. type="datetime-local"
71. placeholder="Please choose..."
72. >
73. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
74. </f7-list-input>
76. <f7-list-input
77. label="Range"
78. :input="false"
79. >
80. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
81. <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
82. </f7-list-input>
84. <f7-list-input
85. label="Textarea"
86. type="textarea"
87. placeholder="Bio"
88. >
89. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
90. </f7-list-input>
92. <f7-list-input
93. label="Resizable"
94. type="textarea"
95. resizable
96. placeholder="Bio"
97. >
98. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
99. </f7-list-input>
100. </f7-list>
102. <f7-block-title>Full Layout / Stacked Labels</f7-block-title>
103. <f7-list no-hairlines-md>
104. <f7-list-input
105. label="Name"
106. type="text"
107. placeholder="Your name"
108. clear-button
109. >
110. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
111. </f7-list-input>
113. <f7-list-input
114. label="Password"
115. type="password"
116. placeholder="Your password"
117. clear-button
118. >
119. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
120. </f7-list-input>
122. <f7-list-input
123. label="E-mail"
124. type="email"
125. placeholder="Your e-mail"
126. clear-button
127. >
128. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
129. </f7-list-input>
131. <f7-list-input
132. label="URL"
133. type="url"
134. placeholder="URL"
135. clear-button
136. >
137. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
138. </f7-list-input>
140. <f7-list-input
141. label="Phone"
142. type="tel"
143. placeholder="Your phone number"
144. clear-button
145. >
146. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
147. </f7-list-input>
149. <f7-list-input
150. label="Gender"
151. type="select"
152. defaultValue="Male"
153. placeholder="Please choose..."
154. >
155. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
156. <option value="Male">Male</option>
157. <option value="Female">Female</option>
158. </f7-list-input>
160. <f7-list-input
161. label="Birthday"
162. type="date"
163. defaultValue="2014-04-30"
164. placeholder="Please choose..."
165. >
166. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
167. </f7-list-input>
169. <f7-list-input
170. label="Date time"
171. type="datetime-local"
172. placeholder="Please choose..."
173. >
174. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
175. </f7-list-input>
177. <f7-list-input
178. label="Range"
179. :input="false"
180. >
181. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
182. <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
183. </f7-list-input>
185. <f7-list-input
186. label="Textarea"
187. type="textarea"
188. placeholder="Bio"
189. >
190. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
191. </f7-list-input>
193. <f7-list-input
194. label="Resizable"
195. type="textarea"
196. resizable
197. placeholder="Bio"
198. >
199. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
200. </f7-list-input>
201. </f7-list>
203. <f7-block-title>Floating Labels (MD-theme only)</f7-block-title>
204. <f7-list no-hairlines-md>
205. <f7-list-input
206. label="Name"
207. floating-label
208. type="text"
209. placeholder="Your name"
210. clear-button
211. >
212. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
213. </f7-list-input>
215. <f7-list-input
216. label="Password"
217. floating-label
218. type="password"
219. placeholder="Your password"
220. clear-button
221. >
222. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
223. </f7-list-input>
225. <f7-list-input
226. label="E-mail"
227. floating-label
228. type="email"
229. placeholder="Your e-mail"
230. clear-button
231. >
232. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
233. </f7-list-input>
235. <f7-list-input
236. label="URL"
237. floating-label
238. type="url"
239. placeholder="URL"
240. clear-button
241. >
242. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
243. </f7-list-input>
245. <f7-list-input
246. label="Phone"
247. floating-label
248. type="tel"
249. placeholder="Your phone number"
250. clear-button
251. >
252. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
253. </f7-list-input>
255. <f7-list-input
256. label="Resizable"
257. floating-label
258. type="textarea"
259. resizable
260. placeholder="Bio"
261. >
262. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
263. </f7-list-input>
264. </f7-list>
266. <f7-block-title>Validation + Additional Info</f7-block-title>
267. <f7-list no-hairlines-md>
268. <f7-list-input
269. label="Name"
270. type="text"
271. placeholder="Your name"
272. info="Default validation"
273. required
274. validate
275. clear-button
276. >
277. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
278. </f7-list-input>
280. <f7-list-input
281. label="Fruit"
282. type="text"
283. placeholder="Type 'apple' or 'banana'"
284. required
285. validate
286. pattern="apple|banana"
287. clear-button
288. >
289. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
290. <span slot="info">Pattern validation (<b>apple|banana</b>)</span>
291. </f7-list-input>
293. <f7-list-input
294. label="E-mail"
295. type="email"
296. placeholder="Your e-mail"
297. info="Default e-mail validation"
298. required
299. validate
300. clear-button
301. >
302. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
303. </f7-list-input>
305. <f7-list-input
306. label="URL"
307. type="url"
308. placeholder="Your URL"
309. info="Default URL validation"
310. required
311. validate
312. clear-button
313. >
314. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
315. </f7-list-input>
317. <f7-list-input
318. label="Number"
319. type="text"
320. placeholder="Enter number"
321. info="With custom error message"
322. error-message="Only numbers please!"
323. required
324. validate
325. pattern="[0-9]*"
326. clear-button
327. >
328. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
329. </f7-list-input>
330. </f7-list>
332. <f7-block-title>Icon + Input</f7-block-title>
333. <f7-list no-hairlines-md>
334. <f7-list-input
335. type="text"
336. placeholder="Your name"
337. clear-button
338. >
339. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
340. </f7-list-input>
342. <f7-list-input
343. type="password"
344. placeholder="Your password"
345. clear-button
346. >
347. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
348. </f7-list-input>
350. <f7-list-input
351. type="email"
352. placeholder="Your e-mail"
353. clear-button
354. >
355. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
356. </f7-list-input>
358. <f7-list-input
359. type="url"
360. placeholder="URL"
361. clear-button
362. >
363. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
364. </f7-list-input>
366. </f7-list>
368. <f7-block-title>Label + Input</f7-block-title>
369. <f7-list no-hairlines-md>
370. <f7-list-input
371. label="Name"
372. type="text"
373. placeholder="Your name"
374. clear-button
375. ></f7-list-input>
377. <f7-list-input
378. label="Password"
379. type="password"
380. placeholder="Your password"
381. clear-button
382. ></f7-list-input>
384. <f7-list-input
385. label="E-mail"
386. type="email"
387. placeholder="Your e-mail"
388. clear-button
389. ></f7-list-input>
391. <f7-list-input
392. label="URL"
393. type="url"
394. placeholder="URL"
395. clear-button
396. ></f7-list-input>
397. </f7-list>
399. <f7-block-title>Only Inputs</f7-block-title>
400. <f7-list no-hairlines-md>
401. <f7-list-input
402. type="text"
403. placeholder="Your name"
404. clear-button
405. ></f7-list-input>
407. <f7-list-input
408. type="password"
409. placeholder="Your password"
410. clear-button
411. ></f7-list-input>
413. <f7-list-input
414. type="email"
415. placeholder="Your e-mail"
416. clear-button
417. ></f7-list-input>
419. <f7-list-input
420. type="url"
421. placeholder="URL"
422. clear-button
423. ></f7-list-input>
424. </f7-list>
426. <f7-block-title>Inputs + Additional Info</f7-block-title>
427. <f7-list no-hairlines-md>
428. <f7-list-input
429. type="text"
430. placeholder="Your name"
431. info="Full name please"
432. clear-button
433. ></f7-list-input>
435. <f7-list-input
436. type="password"
437. placeholder="Your password"
438. info="8 characters minimum"
439. clear-button
440. ></f7-list-input>
442. <f7-list-input
443. type="email"
444. placeholder="Your e-mail"
445. info="Your work e-mail address"
446. clear-button
447. ></f7-list-input>
449. <f7-list-input
450. type="url"
451. placeholder="URL"
452. info="Your website URL"
453. clear-button
454. ></f7-list-input>
455. </f7-list>
457. <f7-block-title>Only Inputs Inset</f7-block-title>
458. <f7-list inset>
459. <f7-list-input
460. type="text"
461. placeholder="Your name"
462. clear-button
463. ></f7-list-input>
465. <f7-list-input
466. type="password"
467. placeholder="Your password"
468. clear-button
469. ></f7-list-input>
471. <f7-list-input
472. type="email"
473. placeholder="Your e-mail"
474. clear-button
475. ></f7-list-input>
477. <f7-list-input
478. type="url"
479. placeholder="URL"
480. clear-button
481. ></f7-list-input>
482. </f7-list>
