我的书签
添加书签
移除书签
Input / Form Elements React Components
Form elements allow you to create flexible and beautiful Form layout. Form elements are just well known List View (List and List Item React components) but with few additional components.
Check out Framework7’s Inputs / Form Elements for their appearance.
Input Components
There are following components included:
**ListInput**/**F7ListInput**- list item input element**Input**/**F7Input**- input element**Label**/**F7Label**- input label element
Since Framework7 3.5.0 it is highly recommended that you only use **ListInput** component. It combines ListItem, Label and Input components in one component and provides much better and more correct input’s state handling.
Input Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| <ListInput> properties | |||
| --- | --- | --- | --- |
| id | string | Wrapping element ID attribute | |
| media | string | List item media image URL | |
| label | string | Input’s label text | |
| inlineLabel | boolean | false | Makes label inline |
| floatingLabel | 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 | object | Value of input’s “style” attribute, in case you need to pass extra styles | |
| clearButton | 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. |
| errorMessage | string | Custom error message to show when input value is invalid | |
| errorMessageForce | 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 | |
| inputId | string | Input element ID attribute | |
| value | string number | Input value | |
| defaultValue | 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 | |
| noStoreData | boolean | false | Allows to ignore input value to be stored when using with Form Storage |
| ignoreStoreData | boolean | false | Same as previous |
| <Label> properties | |||
| floating | boolean | false | Enables floating label (affects MD theme only) |
| inline | boolean | false | Makes label inline |
| <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 | object | Value of input’s “style” attribute, in case you need to pass extra styles | |
| clearButton | 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. |
| errorMessage | string | Custom error message to show when input value is invalid | |
| errorMessageForce | 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 | |
| inputId | string | Input element ID attribute | |
| value | string number | Input value | |
| defaultValue | 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 | |
| noStoreData | boolean | false | Allows to ignore input value to be stored when using with Form Storage |
| ignoreStoreData | boolean | false | Same as previous |
Input Events
| Event | Arguments | Description |
|---|---|---|
| <ListInput>, <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. |
| inputClear | (event) | Fired when input clear button clicked |
| textareaResize | (event) | Fired if resizable textarea resized. event.detail will contain object with the initialHeight, currentHeight and scrollHeight properties |
| inputEmpty | (event) | Fired when input value becomes empty |
| inputNotempty | (event) | Fired when input value becomes not empty |
Input Slots
Input React component (<ListInput>) 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
Examples
1. <BlockTitle>Full Layout / Inline Labels</BlockTitle>
2. <List inlineLabels noHairlinesMd>
3. <ListInput
4. label="Name"
5. type="text"
6. placeholder="Your name"
7. clearButton
8. >
9. <Icon icon="demo-list-icon" slot="media"/>
10. </ListInput>
12. <ListInput
13. label="Password"
14. type="password"
15. placeholder="Your password"
16. clearButton
17. >
18. <Icon icon="demo-list-icon" slot="media"/>
19. </ListInput>
21. <ListInput
22. label="E-mail"
23. type="email"
24. placeholder="Your e-mail"
25. clearButton
26. >
27. <Icon icon="demo-list-icon" slot="media"/>
28. </ListInput>
30. <ListInput
31. label="URL"
32. type="url"
33. placeholder="URL"
34. clearButton
35. >
36. <Icon icon="demo-list-icon" slot="media"/>
37. </ListInput>
39. <ListInput
40. label="Phone"
41. type="tel"
42. placeholder="Your phone number"
43. clearButton
44. >
45. <Icon icon="demo-list-icon" slot="media"/>
46. </ListInput>
48. <ListInput
49. label="Gender"
50. type="select"
51. defaultValue="Male"
52. placeholder="Please choose..."
53. >
54. <Icon icon="demo-list-icon" slot="media"/>
55. <option value="Male">Male</option>
56. <option value="Female">Female</option>
57. </ListInput>
59. <ListInput
60. label="Birthday"
61. type="date"
62. defaultValue="2014-04-30"
63. placeholder="Please choose..."
64. >
65. <Icon icon="demo-list-icon" slot="media"/>
66. </ListInput>
68. <ListInput
69. label="Date time"
70. type="datetime-local"
71. placeholder="Please choose..."
72. >
73. <Icon icon="demo-list-icon" slot="media"/>
74. </ListInput>
76. <ListInput
77. label="Range"
78. input={false}
79. >
80. <Icon icon="demo-list-icon" slot="media"/>
81. <Range slot="input" value={50} min={0} max={100} step={1}/>
82. </ListInput>
84. <ListInput
85. label="Textarea"
86. type="textarea"
87. placeholder="Bio"
88. >
89. <Icon icon="demo-list-icon" slot="media"/>
90. </ListInput>
92. <ListInput
93. label="Resizable"
94. type="textarea"
95. resizable
96. placeholder="Bio"
97. >
98. <Icon icon="demo-list-icon" slot="media"/>
99. </ListInput>
101. </List>
103. <BlockTitle>Full Layout / Stacked Labels</BlockTitle>
104. <List noHairlinesMd>
105. <ListInput
106. label="Name"
107. type="text"
108. placeholder="Your name"
109. clearButton
110. >
111. <Icon icon="demo-list-icon" slot="media"/>
112. </ListInput>
114. <ListInput
115. label="Password"
116. type="password"
117. placeholder="Your password"
118. clearButton
119. >
120. <Icon icon="demo-list-icon" slot="media"/>
121. </ListInput>
123. <ListInput
124. label="E-mail"
125. type="email"
126. placeholder="Your e-mail"
127. clearButton
128. >
129. <Icon icon="demo-list-icon" slot="media"/>
130. </ListInput>
132. <ListInput
133. label="URL"
134. type="url"
135. placeholder="URL"
136. clearButton
137. >
138. <Icon icon="demo-list-icon" slot="media"/>
139. </ListInput>
141. <ListInput
142. label="Phone"
143. type="tel"
144. placeholder="Your phone number"
145. clearButton
146. >
147. <Icon icon="demo-list-icon" slot="media"/>
148. </ListInput>
150. <ListInput
151. label="Gender"
152. type="select"
153. defaultValue="Male"
154. placeholder="Please choose..."
155. >
156. <Icon icon="demo-list-icon" slot="media"/>
157. <option value="Male">Male</option>
158. <option value="Female">Female</option>
159. </ListInput>
161. <ListInput
162. label="Birthday"
163. type="date"
164. defaultValue="2014-04-30"
165. placeholder="Please choose..."
166. >
167. <Icon icon="demo-list-icon" slot="media"/>
168. </ListInput>
170. <ListInput
171. label="Date time"
172. type="datetime-local"
173. placeholder="Please choose..."
174. >
175. <Icon icon="demo-list-icon" slot="media"/>
176. </ListInput>
178. <ListInput
179. label="Range"
180. input={false}
181. >
182. <Icon icon="demo-list-icon" slot="media"/>
183. <Range slot="input" value={50} min={0} max={100} step={1}/>
184. </ListInput>
186. <ListInput
187. label="Textarea"
188. type="textarea"
189. placeholder="Bio"
190. >
191. <Icon icon="demo-list-icon" slot="media"/>
192. </ListInput>
194. <ListInput
195. label="Resizable"
196. type="textarea"
197. resizable
198. placeholder="Bio"
199. >
200. <Icon icon="demo-list-icon" slot="media"/>
201. </ListInput>
202. </List>
204. <BlockTitle>Floating Labels (MD-theme only)</BlockTitle>
205. <List noHairlinesMd>
206. <ListInput
207. label="Name"
208. floatingLabel
209. type="text"
210. placeholder="Your name"
211. clearButton
212. >
213. <Icon icon="demo-list-icon" slot="media"/>
214. </ListInput>
216. <ListInput
217. label="Password"
218. floatingLabel
219. type="password"
220. placeholder="Your password"
221. clearButton
222. >
223. <Icon icon="demo-list-icon" slot="media"/>
224. </ListInput>
226. <ListInput
227. label="E-mail"
228. floatingLabel
229. type="email"
230. placeholder="Your e-mail"
231. clearButton
232. >
233. <Icon icon="demo-list-icon" slot="media"/>
234. </ListInput>
236. <ListInput
237. label="URL"
238. floatingLabel
239. type="url"
240. placeholder="URL"
241. clearButton
242. >
243. <Icon icon="demo-list-icon" slot="media"/>
244. </ListInput>
246. <ListInput
247. label="Phone"
248. floatingLabel
249. type="tel"
250. placeholder="Your phone number"
251. clearButton
252. >
253. <Icon icon="demo-list-icon" slot="media"/>
254. </ListInput>
256. <ListInput
257. label="Resizable"
258. floatingLabel
259. type="textarea"
260. resizable
261. placeholder="Bio"
262. >
263. <Icon icon="demo-list-icon" slot="media"/>
264. </ListInput>
265. </List>
267. <BlockTitle>Validation + Additional Info</BlockTitle>
268. <List noHairlinesMd>
269. <ListInput
270. label="Name"
271. type="text"
272. placeholder="Your name"
273. info="Default validation"
274. required
275. validate
276. clearButton
277. >
278. <Icon icon="demo-list-icon" slot="media"/>
279. </ListInput>
281. <ListInput
282. label="Fruit"
283. type="text"
284. placeholder="Type 'apple' or 'banana'"
285. required
286. validate
287. pattern="apple|banana"
288. clearButton
289. >
290. <Icon icon="demo-list-icon" slot="media"/>
291. <span slot="info">Pattern validation (<b>apple|banana</b>)</span>
292. </ListInput>
294. <ListInput
295. label="E-mail"
296. type="email"
297. placeholder="Your e-mail"
298. info="Default e-mail validation"
299. required
300. validate
301. clearButton
302. >
303. <Icon icon="demo-list-icon" slot="media"/>
304. </ListInput>
306. <ListInput
307. label="URL"
308. type="url"
309. placeholder="Your URL"
310. info="Default URL validation"
311. required
312. validate
313. clearButton
314. >
315. <Icon icon="demo-list-icon" slot="media"/>
316. </ListInput>
318. <ListInput
319. label="Number"
320. type="text"
321. placeholder="Enter number"
322. info="With custom error message"
323. errorMessage="Only numbers please!"
324. required
325. validate
326. pattern="[0-9]*"
327. clearButton
328. >
329. <Icon icon="demo-list-icon" slot="media"/>
330. </ListInput>
332. </List>
334. <BlockTitle>Icon + Input</BlockTitle>
335. <List noHairlinesMd>
336. <ListInput
337. type="text"
338. placeholder="Your name"
339. clearButton
340. >
341. <Icon icon="demo-list-icon" slot="media"/>
342. </ListInput>
344. <ListInput
345. type="password"
346. placeholder="Your password"
347. clearButton
348. >
349. <Icon icon="demo-list-icon" slot="media"/>
350. </ListInput>
352. <ListInput
353. type="email"
354. placeholder="Your e-mail"
355. clearButton
356. >
357. <Icon icon="demo-list-icon" slot="media"/>
358. </ListInput>
360. <ListInput
361. type="url"
362. placeholder="URL"
363. clearButton
364. >
365. <Icon icon="demo-list-icon" slot="media"/>
366. </ListInput>
368. </List>
370. <BlockTitle>Label + Input</BlockTitle>
371. <List noHairlinesMd>
372. <ListInput
373. label="Name"
374. type="text"
375. placeholder="Your name"
376. clearButton
377. />
379. <ListInput
380. label="Password"
381. type="password"
382. placeholder="Your password"
383. clearButton
384. />
386. <ListInput
387. label="E-mail"
388. type="email"
389. placeholder="Your e-mail"
390. clearButton
391. />
393. <ListInput
394. label="URL"
395. type="url"
396. placeholder="URL"
397. clearButton
398. />
399. </List>
401. <BlockTitle>Only Inputs</BlockTitle>
402. <List noHairlinesMd>
403. <ListInput
404. type="text"
405. placeholder="Your name"
406. clearButton
407. />
409. <ListInput
410. type="password"
411. placeholder="Your password"
412. clearButton
413. />
415. <ListInput
416. type="email"
417. placeholder="Your e-mail"
418. clearButton
419. />
421. <ListInput
422. type="url"
423. placeholder="URL"
424. clearButton
425. />
426. </List>
428. <BlockTitle>Inputs + Additional Info</BlockTitle>
429. <List noHairlinesMd>
430. <ListInput
431. type="text"
432. placeholder="Your name"
433. info="Full name please"
434. clearButton
435. />
437. <ListInput
438. type="password"
439. placeholder="Your password"
440. info="8 characters minimum"
441. clearButton
442. />
444. <ListInput
445. type="email"
446. placeholder="Your e-mail"
447. info="Your work e-mail address"
448. clearButton
449. />
451. <ListInput
452. type="url"
453. placeholder="URL"
454. info="Your website URL"
455. clearButton
456. />
457. </List>
459. <BlockTitle>Only Inputs Inset</BlockTitle>
460. <List inset>
461. <ListInput
462. type="text"
463. placeholder="Your name"
464. clearButton
465. />
467. <ListInput
468. type="password"
469. placeholder="Your password"
470. clearButton
471. />
473. <ListInput
474. type="email"
475. placeholder="Your e-mail"
476. clearButton
477. />
479. <ListInput
480. type="url"
481. placeholder="URL"
482. clearButton
483. />
484. </List>
