Inputs / Form Inputs - 图1

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

Input Properties

PropTypeDefaultDescription
<ListInput> properties
idstringWrapping element ID attribute
mediastringList item media image URL
labelstringInput’s label text
inlineLabelbooleanfalseMakes label inline
floatingLabelbooleanfalseEnables floating label
outlinebooleanfalseMakes input outline
inputbooleantrueWhether it should render input element or not. Disable if you want to use custom input inside.
typestringInput 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
resizablebooleanfalseMakes textarea resizable
inputStyleobjectValue of input’s “style” attribute, in case you need to pass extra styles
clearButtonbooleanfalseAdds input clear button that will clear input value on click
validatebooleanfalseWhen 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.
validateOnBlurbooleanfalseWhen enabled then input will be validated on blur only.
errorMessagestringCustom error message to show when input value is invalid
errorMessageForcebooleanfalseForce error message to force. Useful in case you use custom validation and want to show/hide error message when you need it
infostringCustom additional text with information about input
namestringInput name
placeholderstringInput placeholder
idstringWrapping element ID attribute
inputIdstringInput element ID attribute
valuestring
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’}}

defaultValuestring
number
Input value, in case of uncontrolled component
sizestring
number
Value of input’s native “size” attribute
patternstringValue of input’s native “pattern” attribute
acceptstring
number
Value of input’s native “accept” attribute
autocompletestringValue of input’s native “autocomplete” attribute
autofocusbooleanfalseValue of input’s native “autofocus” attribute
autosavestringValue of input’s native “autosave” attribute
checkedbooleanfalseMarks input as checked
disabledbooleanfalseMarks input as disabled
maxstring
number
Value of input’s native “max” attribute
minstring
number
Value of input’s native “min” attribute
stepstring
number
Value of input’s native “step” attribute
maxlengthstring
number
Value of input’s native “maxlength” attribute
minlengthstring
number
Value of input’s native “minlength” attribute
multiplebooleanfalseValue of input’s native “multiple” attribute
readonlybooleanfalseMarks input as readonly
requiredbooleanfalseMarks input as required
tabindexstring
number
Value of input’s native “tabindex” attribute
noStoreDatabooleanfalseAllows to ignore input value to be stored when using with Form Storage
ignoreStoreDatabooleanfalseSame as previous
wrapbooleantrueWhen enabled it will be wrapped in <li> element
calendarParamsobjectObject with Calendar Parameters which is used when type=”datepicker”
colorPickerParamsobjectObject with Color Picker Parameters which is used when type=”colorpicker”
<Input> properties
outlinebooleanfalseMakes input outline
wrapbooleantrueDefines should the input be wraped with <div class=”input”> element or not.
typestringInput 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
resizablebooleanfalseMakes textarea resizable
inputStyleobjectValue of input’s “style” attribute, in case you need to pass extra styles
clearButtonbooleanfalseAdds input clear button that will clear input value on click
validatebooleanfalseWhen 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.
validateOnBlurbooleanfalseWhen enabled then input will be validated on blur only.
errorMessagestringCustom error message to show when input value is invalid
errorMessageForcebooleanfalseForce error message to force. Useful in case you use custom validation and want to show/hide error message when you need it
infostringCustom additional text with information about input
namestringInput name
placeholderstringInput placeholder
idstringWrapping element ID attribute
inputIdstringInput element ID attribute
valuestring
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’}}

defaultValuestring
number
Input value, in case of uncontrolled component
sizestring
number
Value of input’s native “size” attribute
patternstringValue of input’s native “pattern” attribute
acceptstring
number
Value of input’s native “accept” attribute
autocompletestringValue of input’s native “autocomplete” attribute
autofocusbooleanfalseValue of input’s native “autofocus” attribute
autosavestringValue of input’s native “autosave” attribute
checkedbooleanfalseMarks input as checked
disabledbooleanfalseMarks input as disabled
maxstring
number
Value of input’s native “max” attribute
minstring
number
Value of input’s native “min” attribute
stepstring
number
Value of input’s native “step” attribute
maxlengthstring
number
Value of input’s native “maxlength” attribute
minlengthstring
number
Value of input’s native “minlength” attribute
multiplebooleanfalseValue of input’s native “multiple” attribute
readonlybooleanfalseMarks input as readonly
requiredbooleanfalseMarks input as required
tabindexstring
number
Value of input’s native “tabindex” attribute
noStoreDatabooleanfalseAllows to ignore input value to be stored when using with Form Storage
ignoreStoreDatabooleanfalseSame as previous
calendarParamsobjectObject with Calendar Parameters which is used when type=”datepicker”
colorPickerParamsobjectObject with Color Picker Parameters which is used when type=”colorpicker”

Input Events

EventArgumentsDescription
<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 on 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
calendarChange(value)Fired when type=”datepicker” Calendar value changed. As an argument it receives array with selected dates.
colorPickerChange(value)Fired when type=”colorpicker” Color Picker value changed. As an argument it receives object with Color Picker value.

Input Slots

<ListInput> has additional slots for custom elements:

  • **default** - in case of type="select" or type="textarea" - element will be placed inside of select or textarea tags.
  • **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 (input prop must be also set to false)
  • **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

Full Layout / Inline Labels

  1. <List inlineLabels noHairlinesMd>
  2. <ListInput
  3. label="Name"
  4. type="text"
  5. placeholder="Your name"
  6. clearButton
  7. >
  8. <Icon icon="demo-list-icon" slot="media"/>
  9. </ListInput>
  10. <ListInput
  11. label="Password"
  12. type="password"
  13. placeholder="Your password"
  14. clearButton
  15. >
  16. <Icon icon="demo-list-icon" slot="media"/>
  17. </ListInput>
  18. <ListInput
  19. label="E-mail"
  20. type="email"
  21. placeholder="Your e-mail"
  22. clearButton
  23. >
  24. <Icon icon="demo-list-icon" slot="media"/>
  25. </ListInput>
  26. <ListInput
  27. label="URL"
  28. type="url"
  29. placeholder="URL"
  30. clearButton
  31. >
  32. <Icon icon="demo-list-icon" slot="media"/>
  33. </ListInput>
  34. <ListInput
  35. label="Phone"
  36. type="tel"
  37. placeholder="Your phone number"
  38. clearButton
  39. >
  40. <Icon icon="demo-list-icon" slot="media"/>
  41. </ListInput>
  42. <ListInput
  43. label="Gender"
  44. type="select"
  45. defaultValue="Male"
  46. placeholder="Please choose..."
  47. >
  48. <Icon icon="demo-list-icon" slot="media"/>
  49. <option value="Male">Male</option>
  50. <option value="Female">Female</option>
  51. </ListInput>
  52. <ListInput
  53. label="Birthday"
  54. type="date"
  55. defaultValue="2014-04-30"
  56. placeholder="Please choose..."
  57. >
  58. <Icon icon="demo-list-icon" slot="media"/>
  59. </ListInput>
  60. <ListInput
  61. label="Date time"
  62. type="datetime-local"
  63. placeholder="Please choose..."
  64. >
  65. <Icon icon="demo-list-icon" slot="media"/>
  66. </ListInput>
  67. <ListInput
  68. label="Range"
  69. input={false}
  70. >
  71. <Icon icon="demo-list-icon" slot="media"/>
  72. <Range slot="input" value={50} min={0} max={100} step={1}/>
  73. </ListInput>
  74. <ListInput
  75. label="Textarea"
  76. type="textarea"
  77. placeholder="Bio"
  78. >
  79. <Icon icon="demo-list-icon" slot="media"/>
  80. </ListInput>
  81. <ListInput
  82. label="Resizable"
  83. type="textarea"
  84. resizable
  85. placeholder="Bio"
  86. >
  87. <Icon icon="demo-list-icon" slot="media"/>
  88. </ListInput>
  89. </List>

Full Layout / Stacked Labels

  1. <List noHairlinesMd>
  2. <ListInput
  3. label="Name"
  4. type="text"
  5. placeholder="Your name"
  6. clearButton
  7. >
  8. <Icon icon="demo-list-icon" slot="media"/>
  9. </ListInput>
  10. <ListInput
  11. label="Password"
  12. type="password"
  13. placeholder="Your password"
  14. clearButton
  15. >
  16. <Icon icon="demo-list-icon" slot="media"/>
  17. </ListInput>
  18. <ListInput
  19. label="E-mail"
  20. type="email"
  21. placeholder="Your e-mail"
  22. clearButton
  23. >
  24. <Icon icon="demo-list-icon" slot="media"/>
  25. </ListInput>
  26. <ListInput
  27. label="URL"
  28. type="url"
  29. placeholder="URL"
  30. clearButton
  31. >
  32. <Icon icon="demo-list-icon" slot="media"/>
  33. </ListInput>
  34. <ListInput
  35. label="Phone"
  36. type="tel"
  37. placeholder="Your phone number"
  38. clearButton
  39. >
  40. <Icon icon="demo-list-icon" slot="media"/>
  41. </ListInput>
  42. <ListInput
  43. label="Gender"
  44. type="select"
  45. defaultValue="Male"
  46. placeholder="Please choose..."
  47. >
  48. <Icon icon="demo-list-icon" slot="media"/>
  49. <option value="Male">Male</option>
  50. <option value="Female">Female</option>
  51. </ListInput>
  52. <ListInput
  53. label="Birthday"
  54. type="date"
  55. defaultValue="2014-04-30"
  56. placeholder="Please choose..."
  57. >
  58. <Icon icon="demo-list-icon" slot="media"/>
  59. </ListInput>
  60. <ListInput
  61. label="Date time"
  62. type="datetime-local"
  63. placeholder="Please choose..."
  64. >
  65. <Icon icon="demo-list-icon" slot="media"/>
  66. </ListInput>
  67. <ListInput
  68. label="Range"
  69. input={false}
  70. >
  71. <Icon icon="demo-list-icon" slot="media"/>
  72. <Range slot="input" value={50} min={0} max={100} step={1}/>
  73. </ListInput>
  74. <ListInput
  75. label="Textarea"
  76. type="textarea"
  77. placeholder="Bio"
  78. >
  79. <Icon icon="demo-list-icon" slot="media"/>
  80. </ListInput>
  81. <ListInput
  82. label="Resizable"
  83. type="textarea"
  84. resizable
  85. placeholder="Bio"
  86. >
  87. <Icon icon="demo-list-icon" slot="media"/>
  88. </ListInput>
  89. </List>

Date Pickers

  1. <List noHairlinesMd>
  2. <ListInput
  3. label="Default setup"
  4. type="datepicker"
  5. placeholder="Your birth date"
  6. readonly
  7. />
  8. <ListInput
  9. label="Custom date format"
  10. type="datepicker"
  11. placeholder="Select date"
  12. readonly
  13. calendarParams={{dateFormat: 'DD, MM dd, yyyy'}}
  14. />
  15. <ListInput
  16. label="Multiple Values"
  17. type="datepicker"
  18. placeholder="Select multiple dates"
  19. readonly
  20. calendarParams={{ dateFormat: 'M dd yyyy', multiple: true }}
  21. />
  22. <ListInput
  23. label="Range Picker"
  24. type="datepicker"
  25. placeholder="Select date range"
  26. readonly
  27. calendarParams={{ dateFormat: 'M dd yyyy', rangePicker: true }}
  28. />
  29. <ListInput
  30. label="Open in Modal"
  31. type="datepicker"
  32. placeholder="Select date"
  33. readonly
  34. calendarParams={{openIn: 'customModal', header: true, footer: true, dateFormat: 'MM dd yyyy'}}
  35. />
  36. </List>

Color Pickers

  1. <List noHairlinesMd>
  2. <ListInput
  3. type="colorpicker"
  4. label="Color Wheel"
  5. placeholder="Color"
  6. readonly
  7. value={{ hex: '#00ff00' }}
  8. />
  9. <ListInput
  10. type="colorpicker"
  11. label="Saturation-Brightness Spectrum"
  12. placeholder="Color"
  13. readonly
  14. value={{ hex: '#ff0000' }}
  15. colorPickerParams={{
  16. modules: ['sb-spectrum', 'hue-slider'],
  17. }}
  18. />
  19. <ListInput
  20. type="colorpicker"
  21. label="RGB Sliders"
  22. placeholder="Color"
  23. readonly
  24. value={{ hex: '#0000ff' }}
  25. colorPickerParams={{
  26. modules: ['rgb-sliders'],
  27. sliderValue: true,
  28. sliderLabel: true,
  29. }}
  30. />
  31. <ListInput
  32. type="colorpicker"
  33. label="RGBA Sliders"
  34. placeholder="Color"
  35. readonly
  36. value={{ hex: '#ff00ff' }}
  37. colorPickerParams={{
  38. modules: ['rgb-sliders', 'alpha-slider'],
  39. sliderValue: true,
  40. sliderLabel: true,
  41. formatValue(value) {
  42. return `rgba(${value.rgba.join(', ')})`;
  43. },
  44. }}
  45. />
  46. <ListInput
  47. type="colorpicker"
  48. label="HSB Sliders"
  49. placeholder="Color"
  50. readonly
  51. value={{ hex: '#00ff00' }}
  52. colorPickerParams={{
  53. modules: ['hsb-sliders'],
  54. sliderValue: true,
  55. sliderLabel: true,
  56. formatValue(value) {
  57. return `hsb(${value.hsb[0]}, ${value.hsb[1] * 1000 / 10}%, ${value.hsb[2] * 1000 / 10}%)`
  58. },
  59. }}
  60. />
  61. <ListInput
  62. type="colorpicker"
  63. label="RGB Bars"
  64. placeholder="Color"
  65. readonly
  66. value={{ hex: '#0000ff' }}
  67. colorPickerParams={{
  68. modules: ['rgb-bars'],
  69. openIn: 'auto',
  70. barValue: true,
  71. barLabel: true,
  72. formatValue(value) {
  73. return `rgb(${value.rgb.join(', ')})`;
  74. },
  75. }}
  76. />
  77. <ListInput
  78. type="colorpicker"
  79. label="RGB Sliders + Colors"
  80. placeholder="Color"
  81. readonly
  82. value={{ hex: '#ffff00' }}
  83. colorPickerParams={{
  84. modules: ['initial-current-colors', 'rgb-sliders'],
  85. sliderValue: true,
  86. sliderLabel: true,
  87. formatValue(value) {
  88. return `rgb(${value.rgb.join(', ')})`;
  89. },
  90. }}
  91. />
  92. <ListInput
  93. type="colorpicker"
  94. label="Palette"
  95. placeholder="Color"
  96. readonly
  97. value={{ hex: '#FFEBEE' }}
  98. colorPickerParams={{
  99. modules: ['palette'],
  100. openIn: 'auto',
  101. openInPhone: 'sheet',
  102. palette: [
  103. ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
  104. ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
  105. ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
  106. ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
  107. ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
  108. ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
  109. ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
  110. ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
  111. ],
  112. formatValue(value) {
  113. return value.hex;
  114. },
  115. }}
  116. />
  117. <ListInput
  118. type="colorpicker"
  119. label="Pro Mode"
  120. placeholder="Color"
  121. readonly
  122. value={{ hex: '#00ffff' }}
  123. colorPickerParams={{
  124. modules: ['initial-current-colors', 'sb-spectrum', 'hsb-sliders', 'rgb-sliders', 'alpha-slider', 'hex', 'palette'],
  125. openIn: 'auto',
  126. sliderValue: true,
  127. sliderValueEditable: true,
  128. sliderLabel: true,
  129. hexLabel: true,
  130. hexValueEditable: true,
  131. groupedModules: true,
  132. palette: [
  133. ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
  134. ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
  135. ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
  136. ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
  137. ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
  138. ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
  139. ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
  140. ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
  141. ],
  142. formatValue(value) {
  143. return `rgba(${value.rgba.join(', ')})`;
  144. },
  145. }}
  146. />
  147. </List>

Floating Labels

  1. <List noHairlinesMd>
  2. <ListInput
  3. label="Name"
  4. floatingLabel
  5. type="text"
  6. placeholder="Your name"
  7. clearButton
  8. >
  9. <Icon icon="demo-list-icon" slot="media"/>
  10. </ListInput>
  11. <ListInput
  12. label="Password"
  13. floatingLabel
  14. type="password"
  15. placeholder="Your password"
  16. clearButton
  17. >
  18. <Icon icon="demo-list-icon" slot="media"/>
  19. </ListInput>
  20. <ListInput
  21. label="E-mail"
  22. floatingLabel
  23. type="email"
  24. placeholder="Your e-mail"
  25. clearButton
  26. >
  27. <Icon icon="demo-list-icon" slot="media"/>
  28. </ListInput>
  29. <ListInput
  30. label="URL"
  31. floatingLabel
  32. type="url"
  33. placeholder="URL"
  34. clearButton
  35. >
  36. <Icon icon="demo-list-icon" slot="media"/>
  37. </ListInput>
  38. <ListInput
  39. label="Phone"
  40. floatingLabel
  41. type="tel"
  42. placeholder="Your phone number"
  43. clearButton
  44. >
  45. <Icon icon="demo-list-icon" slot="media"/>
  46. </ListInput>
  47. <ListInput
  48. label="Resizable"
  49. floatingLabel
  50. type="textarea"
  51. resizable
  52. placeholder="Bio"
  53. >
  54. <Icon icon="demo-list-icon" slot="media"/>
  55. </ListInput>
  56. </List>

Floating Labels + Outline Inputs

  1. <List noHairlinesMd>
  2. <ListInput
  3. outline
  4. label="Name"
  5. floatingLabel
  6. type="text"
  7. placeholder="Your name"
  8. clearButton
  9. >
  10. <Icon icon="demo-list-icon" slot="media" />
  11. </ListInput>
  12. <ListInput
  13. outline
  14. label="Password"
  15. floatingLabel
  16. type="password"
  17. placeholder="Your password"
  18. clearButton
  19. >
  20. <Icon icon="demo-list-icon" slot="media" />
  21. </ListInput>
  22. <ListInput
  23. outline
  24. label="E-mail"
  25. floatingLabel
  26. type="email"
  27. placeholder="Your e-mail"
  28. clearButton
  29. >
  30. <Icon icon="demo-list-icon" slot="media" />
  31. </ListInput>
  32. <ListInput
  33. outline
  34. label="URL"
  35. floatingLabel
  36. type="url"
  37. placeholder="URL"
  38. clearButton
  39. >
  40. <Icon icon="demo-list-icon" slot="media" />
  41. </ListInput>
  42. <ListInput
  43. outline
  44. label="Phone"
  45. floatingLabel
  46. type="tel"
  47. placeholder="Your phone number"
  48. clearButton
  49. >
  50. <Icon icon="demo-list-icon" slot="media" />
  51. </ListInput>
  52. <ListInput
  53. outline
  54. label="Bio"
  55. floatingLabel
  56. type="textarea"
  57. resizable
  58. placeholder="Bio"
  59. clearButton
  60. >
  61. <Icon icon="demo-list-icon" slot="media" />
  62. </ListInput>
  63. </List>

Validation + Additional Info

  1. <List noHairlinesMd>
  2. <ListInput
  3. label="Name"
  4. type="text"
  5. placeholder="Your name"
  6. info="Default validation"
  7. required
  8. validate
  9. clearButton
  10. >
  11. <Icon icon="demo-list-icon" slot="media"/>
  12. </ListInput>
  13. <ListInput
  14. label="Fruit"
  15. type="text"
  16. placeholder="Type 'apple' or 'banana'"
  17. required
  18. validate
  19. pattern="apple|banana"
  20. clearButton
  21. >
  22. <Icon icon="demo-list-icon" slot="media"/>
  23. <span slot="info">Pattern validation (<b>apple|banana</b>)</span>
  24. </ListInput>
  25. <ListInput
  26. label="E-mail"
  27. type="email"
  28. placeholder="Your e-mail"
  29. info="Default e-mail validation"
  30. required
  31. validate
  32. clearButton
  33. >
  34. <Icon icon="demo-list-icon" slot="media"/>
  35. </ListInput>
  36. <ListInput
  37. label="URL"
  38. type="url"
  39. placeholder="Your URL"
  40. info="Default URL validation"
  41. required
  42. validate
  43. clearButton
  44. >
  45. <Icon icon="demo-list-icon" slot="media"/>
  46. </ListInput>
  47. <ListInput
  48. label="Number"
  49. type="text"
  50. placeholder="Enter number"
  51. info="With custom error message"
  52. errorMessage="Only numbers please!"
  53. required
  54. validate
  55. pattern="[0-9]*"
  56. clearButton
  57. >
  58. <Icon icon="demo-list-icon" slot="media"/>
  59. </ListInput>
  60. </List>

Icon + Input

  1. <List noHairlinesMd>
  2. <ListInput
  3. type="text"
  4. placeholder="Your name"
  5. clearButton
  6. >
  7. <Icon icon="demo-list-icon" slot="media"/>
  8. </ListInput>
  9. <ListInput
  10. type="password"
  11. placeholder="Your password"
  12. clearButton
  13. >
  14. <Icon icon="demo-list-icon" slot="media"/>
  15. </ListInput>
  16. <ListInput
  17. type="email"
  18. placeholder="Your e-mail"
  19. clearButton
  20. >
  21. <Icon icon="demo-list-icon" slot="media"/>
  22. </ListInput>
  23. <ListInput
  24. type="url"
  25. placeholder="URL"
  26. clearButton
  27. >
  28. <Icon icon="demo-list-icon" slot="media"/>
  29. </ListInput>
  30. </List>

Label + Input

  1. <List noHairlinesMd>
  2. <ListInput
  3. label="Name"
  4. type="text"
  5. placeholder="Your name"
  6. clearButton
  7. />
  8. <ListInput
  9. label="Password"
  10. type="password"
  11. placeholder="Your password"
  12. clearButton
  13. />
  14. <ListInput
  15. label="E-mail"
  16. type="email"
  17. placeholder="Your e-mail"
  18. clearButton
  19. />
  20. <ListInput
  21. label="URL"
  22. type="url"
  23. placeholder="URL"
  24. clearButton
  25. />
  26. </List>

Only Inputs

  1. <List noHairlinesMd>
  2. <ListInput
  3. type="text"
  4. placeholder="Your name"
  5. clearButton
  6. />
  7. <ListInput
  8. type="password"
  9. placeholder="Your password"
  10. clearButton
  11. />
  12. <ListInput
  13. type="email"
  14. placeholder="Your e-mail"
  15. clearButton
  16. />
  17. <ListInput
  18. type="url"
  19. placeholder="URL"
  20. clearButton
  21. />
  22. </List>

Inputs + Additional Info

  1. <List noHairlinesMd>
  2. <ListInput
  3. type="text"
  4. placeholder="Your name"
  5. info="Full name please"
  6. clearButton
  7. />
  8. <ListInput
  9. type="password"
  10. placeholder="Your password"
  11. info="8 characters minimum"
  12. clearButton
  13. />
  14. <ListInput
  15. type="email"
  16. placeholder="Your e-mail"
  17. info="Your work e-mail address"
  18. clearButton
  19. />
  20. <ListInput
  21. type="url"
  22. placeholder="URL"
  23. info="Your website URL"
  24. clearButton
  25. />
  26. </List>

Only Inputs Inset

  1. <List inset>
  2. <ListInput
  3. type="text"
  4. placeholder="Your name"
  5. clearButton
  6. />
  7. <ListInput
  8. type="password"
  9. placeholder="Your password"
  10. clearButton
  11. />
  12. <ListInput
  13. type="email"
  14. placeholder="Your e-mail"
  15. clearButton
  16. />
  17. <ListInput
  18. type="url"
  19. placeholder="URL"
  20. clearButton
  21. />
  22. </List>