Form Elements

Supported Element Types

uiType = "Input"

Defines a text input element.

Schema:

{
  "sort": someNumber
  "uiType": "Input",
  "jsonKey": "someValue",
  "level": someNumber,
  "label": "Name of the field to be displayed",
  "description": "Tooltip info to be shown when an ℹ️ icon next to the label is hovered",
  "icon": "Any icon to be shown next to the label",
  "placeholder": "Placeholder text",
  "pattern": "Regex pattern that the input will be matched against",
  "validate": {
    "required": booleanValue,
    "immutable": booleanValue
  }
}

uiType = "Radio"

Defines a radio input element. They displayed in the form of clickable tabs.

Schema:

{
  "sort": someNumber
  "uiType": "Radio",
  "jsonKey": "someValue",
  "level": someNumber,
  "label": "Label to be displayed above the buttons",
  "description": "Tooltip info to be shown when an ℹ️ icon next to the label is hovered",
  "icon": "Any icon to be shown next to the label",
  "validate": {
    "required": booleanValue,
    "immutable": booleanValue,
    "defaultValue": "value of the radio button that is to be selected by default",
    "options": [
      ...,
      {
        "label": "Label to be shown on the radio option",
        "description": "Tooltip info to be shown when an ℹ️ icon next to the radio button label is hovered",
        "icon": "Icon to be shown next to the label",
        "value": "Value of the radio button"
      },
      ...
    ]
  }
}

uiType = "Select"

Defines a select element.

Schema:

{
  "sort": someNumber
  "uiType": "Select",
  "jsonKey": "someValue",
  "level": someNumber,
  "label": "Label to be displayed next to the label",
  "description": "Tooltip info to be shown when an ℹ️ icon next to the label is hovered",
  "icon": "Any icon to be shown next to the label",
  "validate": {
    "required": booleanValue,
    "immutable": booleanValue,
    "defaultValue": "value of select field that is to be selected by default",
    "options": [
      ...,
      {
        "label": "Label to be shown on the select option",
        "value": "Value of the select option"
      },
      ...
    ]
  }
}

uiType = "Switch"

Defines a toggle switch.

Schema:

{
  "sort": someNumber
  "uiType": "Switch",
  "jsonKey": "someValue",
  "level": someNumber,
  "label": "Label to be displayed next to the toggle switch",
  "description": "Tooltip info to be shown when an ℹ️ icon next to the label is hovered",
  "icon": "Any icon to be shown next to the label",
  "validate": {
    "required": booleanValue,
    "immutable": booleanValue,
    "defaultValue": "value of the radio button that is to be selected by default"
  }
}

uiType = "Textarea"

Defines a textarea element.

Schema:

{
  "sort": someNumber
  "uiType": "Textarea",
  "jsonKey": "someValue",
  "level": someNumber,
  "label": "Name of the field to be displayed",
  "description": "Tooltip info to be shown when an ℹ️ icon next to the label is hovered",
  "icon": "Any icon to be shown next to the label",
  "placeholder": "Placeholder text",
  "validate": {
    "required": booleanValue,
    "immutable": booleanValue,
    "maxLength": booleanValue_maxLengthOfInputAllowed
  }
}