JsonEditor

{
  "fields": [
    {
      "settings": {
        "widget": "Data"
      },
      "attrs": {
        "name": "id"
      }
    },
    {
      "settings": {
        "widget": "GridItemContainer",
        "valueType": "container"
      },
      "attrs": {
        "name": "generalGrid",
        "spacing": 4,
        "primary": "Basic Info",
        "secondary": "Setup your general profile details.",
        "divider": true
      },
      "fields": [
        {
          "settings": {
            "widget": "TextField",
            "rule": "required|min:3"
          },
          "attrs": {
            "name": "firstName",
            "label": "First Name",
            "placeholder": "input your first name",
            "icon": "AccountCircle",
            "grid": {
              "xs": 12,
              "md": 6
            }
          }
        },
        {
          "settings": {
            "widget": "TextField",
            "rule": "required|min:3"
          },
          "attrs": {
            "name": "lastName",
            "label": "Last Name",
            "placeholder": "input your last name",
            "icon": "AccountCircle",
            "grid": {
              "xs": 12,
              "md": 6
            }
          }
        },
        {
          "settings": {
            "widget": "TextField"
          },
          "attrs": {
            "name": "birthday",
            "label": "Birthday",
            "icon": "Today",
            "type": "date",
            "fullWidth": false,
            "grid": {
              "xs": 12,
              "md": 5
            }
          }
        },
        {
          "settings": {
            "widget": "TextField",
            "rule": "email"
          },
          "attrs": {
            "name": "email",
            "label": "Email",
            "icon": "ContactMail",
            "grid": {
              "xs": 12,
              "md": 7
            }
          }
        },
        {
          "settings": {
            "widget": "Select",
            "valueType": "string",
            "rule": "required",
            "service": "prefectureService"
          },
          "attrs": {
            "name": "prefecture",
            "label": "Prefecture",
            "icon": "PrefectureCity",
            "defaultValue": "",
            "emptyItem": true,
            "grid": {
              "xs": 12,
              "md": 2
            }
          }
        },
        {
          "settings": {
            "widget": "Select",
            "valueType": "string",
            "rule": "required",
            "service": "cityService",
            "reloadRule": "prefecture"
          },
          "attrs": {
            "name": "city",
            "label": "City",
            "icon": "PrefectureCity",
            "defaultValue": "",
            "emptyItem": true,
            "grid": {
              "xs": 12,
              "md": 3
            }
          }
        },
        {
          "settings": {
            "widget": "Display",
            "computeRule": "concat,valueLabel:prefecture"
          },
          "attrs": {
            "name": "prefectureName",
            "label": "prefectureName",
            "icon": "PrefectureCity",
            "grid": {
              "xs": 12,
              "md": 3
            }
          }
        },
        {
          "settings": {
            "widget": "TextField",
            "valueType": "string"
          },
          "attrs": {
            "name": "phone",
            "icon": "Phone",
            "label": "Phone Number",
            "grid": {
              "xs": 12,
              "md": 7
            }
          }
        },
        {
          "settings": {
            "widget": "Radio",
            "valueType": "number",
            "rule": "required"
          },
          "attrs": {
            "name": "sex",
            "label": "Sex",
            "defaultValue": null,
            "itemsSource": "Sex"
          }
        },
        {
          "settings": {
            "widget": "TextField"
          },
          "attrs": {
            "name": "bio",
            "label": "Bio",
            "icon": "Description",
            "multiline": true,
            "rows": "3",
            "grid": {
              "xs": 12,
              "md": 8
            }
          }
        }
      ]
    },
    {
      "settings": {
        "widget": "GridItemContainer",
        "valueType": "container"
      },
      "attrs": {
        "name": "idGrid",
        "spacing": 4,
        "primary": "Login Info",
        "secondary": "Setup your login details.",
        "divider": true
      },
      "fields": [
        {
          "settings": {
            "widget": "Display"
          },
          "attrs": {
            "name": "loginid",
            "label": "Login ID",
            "grid": {
              "xs": 12,
              "md": 8
            }
          }
        },
        {
          "settings": {
            "widget": "Password",
            "rule": "required"
          },
          "attrs": {
            "name": "password",
            "label": "Password",
            "grid": {
              "xs": 12,
              "md": 8
            }
          }
        }
      ]
    },
    {
      "settings": {
        "widget": "GridItemContainer",
        "valueType": "container"
      },
      "attrs": {
        "name": "socialGrid",
        "spacing": 4,
        "primary": "Extra Info",
        "secondary": "Setup your extra profile details.",
        "divider": true
      },
      "fields": [
        {
          "settings": {
            "widget": "Checkboxes",
            "valueType": "array",
            "rule": "required"
          },
          "attrs": {
            "name": "interest",
            "label": "Your Interests",
            "selectAll": true,
            "items": [
              {
                "label": "Movie",
                "value": 1
              },
              {
                "label": "Gaming",
                "value": 2
              },
              {
                "label": "Coding",
                "value": 3
              }
            ]
          }
        },
        {
          "settings": {
            "widget": "TextField"
          },
          "attrs": {
            "name": "facebook",
            "label": "Facebook Link",
            "icon": "Facebook"
          }
        },
        {
          "settings": {
            "widget": "TextField"
          },
          "attrs": {
            "name": "twitter",
            "label": "Twitter Link",
            "icon": "Twitter"
          }
        },
        {
          "settings": {
            "widget": "Autocomplete",
            "rule": "required",
            "service": "filmService",
            "serviceParamFields": [
              "firstName",
              "lastName"
            ]
          },
          "attrs": {
            "name": "film",
            "label": "FavoriteFilm",
            "freeSolo": true,
            "icon": "MenuBook",
            "reloadOnInput": true,
            "reloadExcludeRegex": "[0-9]"
          }
        },
        {
          "settings": {
            "widget": "Display",
            "computeRule": "concat:film"
          },
          "attrs": {
            "name": "filmValue",
            "label": "FavoriteFilm.value",
            "grid": {
              "xs": 12,
              "md": 6
            }
          }
        },
        {
          "settings": {
            "widget": "Display",
            "computeRule": "concat,valueLabel:film"
          },
          "attrs": {
            "name": "filmValueLabel",
            "label": "FavoriteFilm.valueLabel",
            "grid": {
              "xs": 12,
              "md": 6
            }
          }
        },
        {
          "settings": {
            "widget": "Checkbox",
            "valueType": "boolean",
            "rule": "required"
          },
          "attrs": {
            "name": "subscription",
            "label": "Subscribe the news letter!"
          }
        }
      ]
    }
  ]
}

Basic Info

Setup your general profile details.

First Name *

Last Name *

Birthday

Prefecture *

City *

prefectureName

Phone Number

Sex *

male

female

other

Bio

Login Info

Setup your login details.

Password *

Extra Info

Setup your extra profile details.