Skip to main content

Look & Feel

The appearance attributes allow you to change the look and feel of your form elements, like color, height, weight, or borders.

To do so, you need to add those look & feel attributes to the field in form configuration. For example:

{
  "title": "Person",
  "description": "A person form",  ...
  "layout": {
    "items": [
      {
        "field": "firstName", 
        "bgColor": "red",
        "icon":"face"
      },
      ...
    ]
  }
}

This would change the look and feel of the form like this:

Types

By default, the field type is detected from the JSON Schema, so there is no requirement to change this. But, you can customize it using these type attributes, if required.

TypeDescription
type="password"Hides the input since it is sensitive data.
type="email"Renders the field using the browser's native email widget (depends on the browser if it is supported).
type="search"Renders the field using the browser's native search widget
depends on the browser if it is supported).
type="url"Renders the field using the browser's native url widget
depends on the browser if it is supported).
type="tel"Renders the field using the browser's native phone widget
(depends on the browser if it is supported).
type="textarea"Renders the field using the browser's native textarea widget
(depends on the browser if it is supported).

Attributes

These are are the attributes you can set to change the appearance of a field:

NameValueDescription
bgColorOne of the color names of the default palette. See below.Changes the background color of an element. For example, red, green, blue, or indigio-5.
colorOne of the color names of the default palette. See below.Changes the color of the element label and its border.
heightInteger. For example, 200.Sets the fixed height of the element.

(use min-height & max-height to set half limits)
iconThe name of the material icon.Shows an icon in the element. See the material icons for a reference of available icon names: https://material.io/resources/icons
widthInteger. For example, 500.Sets the fixed width of an element.

(use min-width & max-width to set half limits)
readonlytrue or false.Makes an element read only, so no value can be set there.
roundedExample:
"rounded":""
filledExample:
"filled":""
autogrowExample:
"autogrow":""
The field automatically grows while the user is typing more text.
suffixExample: "suffix":"@email.de"Shows a suffix for example @email.de inside the field.
prefixExample:
"prefix":"EUR"
Shows a prefix for example EUR inside the field.

Default color palette

In order to change the color of an element, use one of the color names from these default palettes.

Material icons

Below, you can find a preview of icons. To get the full list and name of all possible icons, go to https://material.io/resources/icons, and search for the icon you need.

Report an Issue

Your help is needed!

In case you're missing something on this page, you found an error or you have an idea for improvement, please click here to create a new issue. Another way to contribute is, to click Edit this page below and directly add your changes in GitHub. Many thanks for your contribution in order to improve PIPEFORCE!