Components
Placeholder Image

Image Placeholder

The Image Placeholder placeholder-image is a layout field, it shows any image, it doesn't return any value.

Example

{
  "component": "placeholder-image",
  "label": "Field 1",
  "name": "my_placeholder",
  "url": "https://unpkg.com/lets-form-icons@1.0.1/generic.svg",
  "react-rsuite5": {
    "maxWidth": 30,
    "maxHeight": 40
  },
  "react-material-ui": {
    "maxWidth": 100
  }
}
Loading...

Transformer JS

The values of a placeholder-image can be changed dynamically with a JavaScript Transformer, for example:

// ...
fields: [
  {
    component: 'checkbox',
    name: 'showPassword',
    script: `
    if (showPassword) {
      setValue('eye', 'url', 'https://unpkg.com/lets-form-icons@1.0.1/eye.svg');
    } else {
      setValue('eye', 'url', 'https://unpkg.com/lets-form-icons@1.0.1/eye-off.svg');
    }`
  },
  {
    component: 'placeholder-image',
    name: 'eye',
    url: 'https://unpkg.com/lets-form-icons@1.0.1/eye.svg'
  }
]

Reference

PropertyTypeDescription
componentstring
= "placeholder-image"
namestring
urlstringURL of the image to show
alignstringImage alignment. Values: "left", "center", "right".
hiddenbooleanHides the field from the form
Pick up a framework to show specific properties
Bootstrap
React Suite