# JSON Schema Form

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FIJH8QQC9O0WhaxGiKmri%2Fimage.png?alt=media&#x26;token=b917be52-b959-4f26-85d0-d73febdaad44" alt=""><figcaption></figcaption></figure>

[*References*](#user-content-fn-1)[^1]

{% hint style="info" %}
<https://json-schema.org/learn/getting-started-step-by-step>\
<https://jsonforms.io/examples/basic/>\
<https://jsonforms.io/docs/uischema/>\
<https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema/>
{% endhint %}

## Basic

#### JSON Schema

The JSON schema defines the underlying data to be shown in the UI (objects, properties, and their types).

```json
{
  "title": "User Information",
  "description": "Form Example",
  "type": "object",
  "required": [
    "name",
    "phone"
  ],
  "properties": {
    "name": {
      "type": "string",
      "title": "Name"
    },
    "phone": {
      "type": "string",
      "title": "Phone",
      "minLength": 11
    },
    "birthday": {
      "type": "string",
      "title": "Birthday"
    }
  }
}
```

#### UI Schema

The UI Schema defines how this data is rendered as a form, e.g. the order of controls, their visibility and the layout.

```json
{
  "name": {
    "ui:autofocus": true,
    "ui:emptyValue": ""
  },
  "phone": {
    "ui:help": "at least 11 characters"
  },
  "birthday": {
    "ui:widget": "date"
  }
}
```

#### Pre-filled Form Data

The actual data or the values for the fields defined by the schema. These values must be provided using JSON format as well, mapped with their fields.

```json
{
  "name": "David",
  "phone": "13488886666",
  "birthday": "1980-03-16"
}
```

## Interaction

<mark style="color:blue;">**Submit -**</mark> This is triggered when the user submits the form after filling out the details with valid values.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-bc971b2d1be803d20090b8de0d930b8783eca9b9%2Fimage%20(62).png?alt=media" alt=""><figcaption></figcaption></figure>

#### Disabled

Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-695f356d5e8bc58072102f50922157508eb6122b%2Fimage%20(224).png?alt=media" alt=""><figcaption><p>Read-only</p></figcaption></figure>

#### Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-4aaa812d0b623487c085a616219a4515138079fb%2Fimage%20(211).png?alt=media" alt="" width="338"><figcaption><p>Set the visibility</p></figcaption></figure>

#### Reset After Successful Submit

All the input widgets on the form are cleared out after the form is submitted successfully, when this property is set ON.

## Layout

#### Height

|       |                                                                      |
| ----- | -------------------------------------------------------------------- |
| Auto  | The height is auto-adjusted for the content                          |
| Fixed | The height of the widget is fixed and will not adjust to the content |

## Style

<table><thead><tr><th width="218" align="center">Property</th><th>Description</th></tr></thead><tbody><tr><td align="center">Background</td><td>Users can change the colour of the widget background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.</td></tr><tr><td align="center">Box Shadow</td><td>The is the colour of the shadow that is generated behind the widget box. The X and Y axis values can be altered such that the shadow can be set to fall anywhere behind the widget area.<br>"x-offset" - a positive number specifies the shadow will be on the right of the box, and a negative number will put the shadow on the left of the box.<br>"y-offset" - a negative one means the shadow will be above the box, and a positive number means the shadow will be below the box.<br>"Blur" - if the number is set to 0 then the shadow will be sharp. It will more blurred as the number goes higher, and the shadow will extend further away.<br>"Color" - sets the colour of the shadow. If the colour is not set, the box shadows are drawn in the foreground colour.</td></tr><tr><td align="center">Border Color</td><td>Set the colour to the border lines. The border lines will be shown only if that is enabled.</td></tr><tr><td align="center">Border Radius</td><td>This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.</td></tr><tr><td align="center">Border Width</td><td>Set the thickness of the border of the widget using this value. It is defined using "px" terms.</td></tr><tr><td align="center">Margin</td><td>This value is set in terms of "px" number which creates the space between the border and the content of the widget.</td></tr><tr><td align="center">Padding</td><td>This value is set in terms of "px" number which creates the space between the border and outer elements.</td></tr></tbody></table>

[^1]: