Custom Controls Example

This example demonstrates that the default renderers of JSON Forms can be replaced with custom ones. We've replaced the default renderer for integers (which have a maximum value of 5 here) with one displaying stars (at the bottom of the form).

You can read more about custom controls in the Custom renderers section.

Demo

Schema

schema.json

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 1
    },
    "description": {
      "type": "string"
    },
    "done": {
      "type": "boolean"
    },
    "dueDate": {
      "type": "string",
      "format": "date"
    },
    "rating": {
      "type": "integer",
      "maximum": 5
    }
  },
  "required": [
    "name"
  ]
}

UI Schema

uischema.json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/name"
    },
    {
      "type": "Control",
      "label": false,
      "scope": "#/properties/done"
    },
    {
      "type": "Control",
      "scope": "#/properties/description",
      "options": {
        "multi": true
      }
    },
    {
      "type": "Control",
      "scope": "#/properties/dueDate"
    },
    {
      "type": "Control",
      "scope": "#/properties/rating"
    }
  ]
}

Data

{
  "name": "Send email to Adrian",
  "description": "Confirm if you have passed the subject\nHereby ...",
  "done": true,
  "rating": 3
}