我的书签
添加书签
移除书签
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 elementf7-input- input element
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 |
| outline | boolean | false | Makes input outline |
| 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 - datepicker - to open Calendar on input focus - colorpicker - to open Color Picker on input focus - texteditor - to open Text Editor on input focus | |
| 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. |
| validate-on-blur | boolean | false | When enabled then input will be validated on blur only. |
| onValidate | function | Callback to be executed on input validation, returns boolean value indication whether the input is valid or not. 1. <f7-list-input 2. type=”email” 3. validate 4. :onValidate=”(isValid) => setInputValid(isValid)” 5. /> |
|
| 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 array object | Input value. If type=”datepicker” then value must be passed as what Calendar accepts - Array with dates, for example :value=”[new Date()]” If type=”colorpicker” then value must be passed as what Color Picker accepts - Object with colors, for example :value=”{hex: ‘#ff0000’}” If type=”texteditor” then value should be HTML string |
|
| default-value | string number | Input value, in case of uncontrolled component | |
| inputmode | string | Value of input’s native “inputmode” attribute | |
| 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 | |
| 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 |
| wrap | boolean | true | When enabled it will be wrapped in <li> element |
| calendar-params | object | Object with Calendar Parameters which is used when type=”datepicker” |
|
| color-picker-params | object | Object with Color Picker Parameters which is used when type=”colorpicker” |
|
| text-editor-params | object | Object with Text Editor Parameters which is used when type=”texteditor” |
|
| <f7-input> properties | |||
| outline | boolean | false | Makes input outline |
| wrap | boolean | true | Defines should the input be wraped with <div class=”input”> element or not. |
| type | string | Input type. All default HTML5 input type, and few special ones: - textarea - to render textarea element - select - to render select element - datepicker - to open Calendar on input focus - colorpicker - to open Color Picker on input focus - texteditor - to open Text Editor on input focus | |
| 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. |
| validate-on-blur | boolean | false | When enabled then input will be validated on blur only. |
| onValidate | function | Callback to be executed on input validation, returns boolean value indication whether the input is valid or not. 1. <f7-input 2. type=”email” 3. validate 4. :onValidate=”(isValid) => setInputValid(isValid)” 5. /> |
|
| 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. If type=”datepicker” then value must be passed as what Calendar accepts - Array with dates, for example :value=”[new Date()]” If type=”colorpicker” then value must be passed as what Color Picker accepts - Object with colors, for example :value=”{hex: ‘#ff0000’}” If type=”texteditor” then value should be HTML string |
|
| inputmode | string | Value of input’s native “inputmode” attribute | |
| 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 |
| calendar-params | object | Object with Calendar Parameters which is used when type=”datepicker” |
|
| color-picker-params | object | Object with Color Picker Parameters which is used when type=”colorpicker” |
|
| text-editor-params | object | Object with Text Editor Parameters which is used when type=”texteditor” |
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 on 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 |
| calendar:change | (value) | Fired when type=”datepicker” Calendar value changed. As an argument it receives array with selected dates. |
| colorpicker:change | (value) | Fired when type=”colorpicker” Color Picker value changed. As an argument it receives object with Color Picker value. |
| texteditor:change | (value) | Fired when type=”texteditor” Text Editor value changed. As an argument it receives Texteditor value (HTML string). |
Input Slots
<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 messageerror-message- element will be inserted into container with error messagelabel- element will be inserted into container with input’s labelinput- 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>elementroot/root-end- element will be inserted in the end of<li>elementcontent-start- element will be inserted in the beginning of<div class="item-content">elementcontent/content-end- element will be inserted in the end of<div class="item-content">elementinner-start- element will be inserted in the beginning of<div class="item-inner">elementinner/inner-end- element will be inserted in the end of<div class="item-inner">elementmedia- 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
Full Layout / Inline Labels
1. <f7-list inline-labels no-hairlines-md>
2. <f7-list-input
3. label="Name"
4. type="text"
5. placeholder="Your name"
6. clear-button
7. >
8. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
9. </f7-list-input>
11. <f7-list-input
12. label="Password"
13. type="password"
14. placeholder="Your password"
15. clear-button
16. >
17. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
18. </f7-list-input>
20. <f7-list-input
21. label="E-mail"
22. type="email"
23. placeholder="Your e-mail"
24. clear-button
25. >
26. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
27. </f7-list-input>
29. <f7-list-input
30. label="URL"
31. type="url"
32. placeholder="URL"
33. clear-button
34. >
35. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
36. </f7-list-input>
38. <f7-list-input
39. label="Phone"
40. type="tel"
41. placeholder="Your phone number"
42. clear-button
43. >
44. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
45. </f7-list-input>
47. <f7-list-input
48. label="Gender"
49. type="select"
50. defaultValue="Male"
51. placeholder="Please choose..."
52. >
53. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
54. <option value="Male">Male</option>
55. <option value="Female">Female</option>
56. </f7-list-input>
58. <f7-list-input
59. label="Birthday"
60. type="date"
61. defaultValue="2014-04-30"
62. placeholder="Please choose..."
63. >
64. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
65. </f7-list-input>
67. <f7-list-input
68. label="Date time"
69. type="datetime-local"
70. placeholder="Please choose..."
71. >
72. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
73. </f7-list-input>
75. <f7-list-input
76. label="Range"
77. :input="false"
78. >
79. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
80. <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
81. </f7-list-input>
83. <f7-list-input
84. label="Textarea"
85. type="textarea"
86. placeholder="Bio"
87. >
88. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
89. </f7-list-input>
91. <f7-list-input
92. label="Resizable"
93. type="textarea"
94. resizable
95. placeholder="Bio"
96. >
97. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
98. </f7-list-input>
99. </f7-list>
Full Layout / Stacked Labels
1. <f7-list no-hairlines-md>
2. <f7-list-input
3. label="Name"
4. type="text"
5. placeholder="Your name"
6. clear-button
7. >
8. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
9. </f7-list-input>
11. <f7-list-input
12. label="Password"
13. type="password"
14. placeholder="Your password"
15. clear-button
16. >
17. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
18. </f7-list-input>
20. <f7-list-input
21. label="E-mail"
22. type="email"
23. placeholder="Your e-mail"
24. clear-button
25. >
26. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
27. </f7-list-input>
29. <f7-list-input
30. label="URL"
31. type="url"
32. placeholder="URL"
33. clear-button
34. >
35. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
36. </f7-list-input>
38. <f7-list-input
39. label="Phone"
40. type="tel"
41. placeholder="Your phone number"
42. clear-button
43. >
44. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
45. </f7-list-input>
47. <f7-list-input
48. label="Gender"
49. type="select"
50. defaultValue="Male"
51. placeholder="Please choose..."
52. >
53. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
54. <option value="Male">Male</option>
55. <option value="Female">Female</option>
56. </f7-list-input>
58. <f7-list-input
59. label="Birthday"
60. type="date"
61. defaultValue="2014-04-30"
62. placeholder="Please choose..."
63. >
64. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
65. </f7-list-input>
67. <f7-list-input
68. label="Date time"
69. type="datetime-local"
70. placeholder="Please choose..."
71. >
72. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
73. </f7-list-input>
75. <f7-list-input
76. label="Range"
77. :input="false"
78. >
79. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
80. <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
81. </f7-list-input>
83. <f7-list-input
84. label="Textarea"
85. type="textarea"
86. placeholder="Bio"
87. >
88. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
89. </f7-list-input>
91. <f7-list-input
92. label="Resizable"
93. type="textarea"
94. resizable
95. placeholder="Bio"
96. >
97. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
98. </f7-list-input>
99. </f7-list>
Date Pickers
1. <f7-list no-hairlines-md>
2. <f7-list-input
3. label="Default setup"
4. type="datepicker"
5. placeholder="Your birth date"
6. readonly
7. ></f7-list-input>
8. <f7-list-input
9. label="Custom date format"
10. type="datepicker"
11. placeholder="Select date"
12. readonly
13. :calendar-params="{dateFormat: 'DD, MM dd, yyyy'}"
14. ></f7-list-input>
15. <f7-list-input
16. label="Multiple Values"
17. type="datepicker"
18. placeholder="Select multiple dates"
19. readonly
20. :calendar-params="{ dateFormat: 'M dd yyyy', multiple: true }"
21. ></f7-list-input>
22. <f7-list-input
23. label="Range Picker"
24. type="datepicker"
25. placeholder="Select date range"
26. readonly
27. :calendar-params="{ dateFormat: 'M dd yyyy', rangePicker: true }"
28. ></f7-list-input>
29. <f7-list-input
30. label="Open in Modal"
31. type="datepicker"
32. placeholder="Select date"
33. readonly
34. :calendar-params="{openIn: 'customModal', header: true, footer: true, dateFormat: 'MM dd yyyy'}"
35. ></f7-list-input>
36. </f7-list>
Color Pickers
1. <f7-list no-hairlines-md>
2. <f7-list-input
3. type="colorpicker"
4. label="Color Wheel"
5. placeholder="Color"
6. readonly
7. :value="{ hex: '#00ff00' }"
8. ></f7-list-input>
9. <f7-list-input
10. type="colorpicker"
11. label="Saturation-Brightness Spectrum"
12. placeholder="Color"
13. readonly
14. :value="{ hex: '#ff0000' }"
15. :color-picker-params="{
16. modules: ['sb-spectrum', 'hue-slider'],
17. }"
18. ></f7-list-input>
20. <f7-list-input
21. type="colorpicker"
22. label="RGB Sliders"
23. placeholder="Color"
24. readonly
25. :value="{ hex: '#0000ff' }"
26. :color-picker-params="{
27. modules: ['rgb-sliders'],
28. sliderValue: true,
29. sliderLabel: true,
30. }"
31. ></f7-list-input>
33. <f7-list-input
34. type="colorpicker"
35. label="RGBA Sliders"
36. placeholder="Color"
37. readonly
38. :value="{ hex: '#ff00ff' }"
39. :color-picker-params="{
40. modules: ['rgb-sliders', 'alpha-slider'],
41. sliderValue: true,
42. sliderLabel: true,
43. formatValue(value) {
44. return `rgba(${value.rgba.join(', ')})`;
45. },
46. }"
47. ></f7-list-input>
48. <f7-list-input
49. type="colorpicker"
50. label="HSB Sliders"
51. placeholder="Color"
52. readonly
53. :value="{ hex: '#00ff00' }"
54. :color-picker-params="{
55. modules: ['hsb-sliders'],
56. sliderValue: true,
57. sliderLabel: true,
58. formatValue(value) {
59. return `hsb(${value.hsb[0]}, ${value.hsb[1] * 1000 / 10}%, ${value.hsb[2] * 1000 / 10}%)`
60. },
61. }"
62. ></f7-list-input>
63. <f7-list-input
64. type="colorpicker"
65. label="RGB Bars"
66. placeholder="Color"
67. readonly
68. :value="{ hex: '#0000ff' }"
69. :color-picker-params="{
70. modules: ['rgb-bars'],
71. openIn: 'auto',
72. barValue: true,
73. barLabel: true,
74. formatValue(value) {
75. return `rgb(${value.rgb.join(', ')})`;
76. },
77. }"
78. ></f7-list-input>
79. <f7-list-input
80. type="colorpicker"
81. label="RGB Sliders + Colors"
82. placeholder="Color"
83. readonly
84. :value="{ hex: '#ffff00' }"
85. :color-picker-params="{
86. modules: ['initial-current-colors', 'rgb-sliders'],
87. sliderValue: true,
88. sliderLabel: true,
89. formatValue(value) {
90. return `rgb(${value.rgb.join(', ')})`;
91. },
92. }"
93. ></f7-list-input>
94. <f7-list-input
95. type="colorpicker"
96. label="Palette"
97. placeholder="Color"
98. readonly
99. :value="{ hex: '#FFEBEE' }"
100. :color-picker-params="{
101. modules: ['palette'],
102. openIn: 'auto',
103. openInPhone: 'sheet',
104. palette: [
105. ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
106. ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
107. ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
108. ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
109. ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
110. ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
111. ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
112. ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
113. ],
114. formatValue(value) {
115. return value.hex;
116. },
117. }"
118. ></f7-list-input>
119. <f7-list-input
120. type="colorpicker"
121. label="Pro Mode"
122. placeholder="Color"
123. readonly
124. :value="{ hex: '#00ffff' }"
125. :color-picker-params="{
126. modules: ['initial-current-colors', 'sb-spectrum', 'hsb-sliders', 'rgb-sliders', 'alpha-slider', 'hex', 'palette'],
127. openIn: 'auto',
128. sliderValue: true,
129. sliderValueEditable: true,
130. sliderLabel: true,
131. hexLabel: true,
132. hexValueEditable: true,
133. groupedModules: true,
134. palette: [
135. ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
136. ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
137. ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
138. ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
139. ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
140. ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
141. ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
142. ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
143. ],
144. formatValue(value) {
145. return `rgba(${value.rgba.join(', ')})`;
146. },
147. }"
148. ></f7-list-input>
149. </f7-list>
Floating Labels
1. <f7-list no-hairlines-md>
2. <f7-list-input
3. label="Name"
4. floating-label
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. floating-label
15. type="password"
16. placeholder="Your password"
17. clear-button
18. >
19. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
20. </f7-list-input>
22. <f7-list-input
23. label="E-mail"
24. floating-label
25. type="email"
26. placeholder="Your e-mail"
27. clear-button
28. >
29. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
30. </f7-list-input>
32. <f7-list-input
33. label="URL"
34. floating-label
35. type="url"
36. placeholder="URL"
37. clear-button
38. >
39. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
40. </f7-list-input>
42. <f7-list-input
43. label="Phone"
44. floating-label
45. type="tel"
46. placeholder="Your phone number"
47. clear-button
48. >
49. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
50. </f7-list-input>
52. <f7-list-input
53. label="Resizable"
54. floating-label
55. type="textarea"
56. resizable
57. placeholder="Bio"
58. >
59. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
60. </f7-list-input>
61. </f7-list>
Floating Labels + Outline Inputs
1. <f7-list no-hairlines-md>
2. <f7-list-input
3. outline
4. label="Name"
5. floating-label
6. type="text"
7. placeholder="Your name"
8. clear-button
9. >
10. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
11. </f7-list-input>
12. <f7-list-input
13. outline
14. label="Password"
15. floating-label
16. type="password"
17. placeholder="Your password"
18. clear-button
19. >
20. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
21. </f7-list-input>
22. <f7-list-input
23. outline
24. label="E-mail"
25. floating-label
26. type="email"
27. placeholder="Your e-mail"
28. clear-button
29. >
30. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
31. </f7-list-input>
32. <f7-list-input
33. outline
34. label="URL"
35. floating-label
36. type="url"
37. placeholder="URL"
38. clear-button
39. >
40. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
41. </f7-list-input>
42. <f7-list-input
43. outline
44. label="Phone"
45. floating-label
46. type="tel"
47. placeholder="Your phone number"
48. clear-button
49. >
50. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
51. </f7-list-input>
52. <f7-list-input
53. outline
54. label="Bio"
55. floating-label
56. type="textarea"
57. resizable
58. placeholder="Bio"
59. clear-button
60. >
61. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
62. </f7-list-input>
63. </f7-list>
Validation + Additional Info
1. <f7-list no-hairlines-md>
2. <f7-list-input
3. label="Name"
4. type="text"
5. placeholder="Your name"
6. info="Default validation"
7. required
8. validate
9. clear-button
10. >
11. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
12. </f7-list-input>
14. <f7-list-input
15. label="Fruit"
16. type="text"
17. placeholder="Type 'apple' or 'banana'"
18. required
19. validate
20. pattern="apple|banana"
21. clear-button
22. >
23. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
24. <span slot="info">Pattern validation (<b>apple|banana</b>)</span>
25. </f7-list-input>
27. <f7-list-input
28. label="E-mail"
29. type="email"
30. placeholder="Your e-mail"
31. info="Default e-mail validation"
32. required
33. validate
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="URL"
41. type="url"
42. placeholder="Your URL"
43. info="Default URL validation"
44. required
45. validate
46. clear-button
47. >
48. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
49. </f7-list-input>
51. <f7-list-input
52. label="Number"
53. type="text"
54. placeholder="Enter number"
55. info="With custom error message"
56. error-message="Only numbers please!"
57. required
58. validate
59. pattern="[0-9]*"
60. clear-button
61. >
62. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
63. </f7-list-input>
64. </f7-list>
Icon + Input
1. <f7-list no-hairlines-md>
2. <f7-list-input
3. type="text"
4. placeholder="Your name"
5. clear-button
6. >
7. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
8. </f7-list-input>
10. <f7-list-input
11. type="password"
12. placeholder="Your password"
13. clear-button
14. >
15. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
16. </f7-list-input>
18. <f7-list-input
19. type="email"
20. placeholder="Your e-mail"
21. clear-button
22. >
23. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
24. </f7-list-input>
26. <f7-list-input
27. type="url"
28. placeholder="URL"
29. clear-button
30. >
31. <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
32. </f7-list-input>
34. </f7-list>
Label + Input
1. <f7-list no-hairlines-md>
2. <f7-list-input
3. label="Name"
4. type="text"
5. placeholder="Your name"
6. clear-button
7. ></f7-list-input>
9. <f7-list-input
10. label="Password"
11. type="password"
12. placeholder="Your password"
13. clear-button
14. ></f7-list-input>
16. <f7-list-input
17. label="E-mail"
18. type="email"
19. placeholder="Your e-mail"
20. clear-button
21. ></f7-list-input>
23. <f7-list-input
24. label="URL"
25. type="url"
26. placeholder="URL"
27. clear-button
28. ></f7-list-input>
29. </f7-list>
Only Inputs
1. <f7-list no-hairlines-md>
2. <f7-list-input
3. type="text"
4. placeholder="Your name"
5. clear-button
6. ></f7-list-input>
8. <f7-list-input
9. type="password"
10. placeholder="Your password"
11. clear-button
12. ></f7-list-input>
14. <f7-list-input
15. type="email"
16. placeholder="Your e-mail"
17. clear-button
18. ></f7-list-input>
20. <f7-list-input
21. type="url"
22. placeholder="URL"
23. clear-button
24. ></f7-list-input>
25. </f7-list>
Inputs + Additional Info
1. <f7-list no-hairlines-md>
2. <f7-list-input
3. type="text"
4. placeholder="Your name"
5. info="Full name please"
6. clear-button
7. ></f7-list-input>
9. <f7-list-input
10. type="password"
11. placeholder="Your password"
12. info="8 characters minimum"
13. clear-button
14. ></f7-list-input>
16. <f7-list-input
17. type="email"
18. placeholder="Your e-mail"
19. info="Your work e-mail address"
20. clear-button
21. ></f7-list-input>
23. <f7-list-input
24. type="url"
25. placeholder="URL"
26. info="Your website URL"
27. clear-button
28. ></f7-list-input>
29. </f7-list>
Only Inputs Inset
1. <f7-list inset>
2. <f7-list-input
3. type="text"
4. placeholder="Your name"
5. clear-button
6. ></f7-list-input>
8. <f7-list-input
9. type="password"
10. placeholder="Your password"
11. clear-button
12. ></f7-list-input>
14. <f7-list-input
15. type="email"
16. placeholder="Your e-mail"
17. clear-button
18. ></f7-list-input>
20. <f7-list-input
21. type="url"
22. placeholder="URL"
23. clear-button
24. ></f7-list-input>
25. </f7-list>
