Basic examples

Empty string prop

JSON

{
  "schema": {
    "type": "object",
    "properties": {
      "firstName": {
        "type": "string"
      }
    }
  },
  "layout": {
    "key": "firstName"
  }
}

String prop with placeholder

{
  "schema": {
    "type": "object",
    "properties": {
      "firstName": {
        "description": "Enter your first name",
        "title": "First name",
        "type": "string"
      }
    }
  },
  "layout": {
    "key": "firstName",
    "placeholder": "Example: John"
  }
}

Required string prop

{
  "schema": {
    "type": "object",
    "properties": {
      "firstName": {
        "type": "string",
        "title": "I mustn't be empty!",
        "description": "Textbox that cannot be empty",
        "required": true
      }
    }
  },
  "layout": {
    "key": "firstName",
    "placeholder": "Example: John"
  }
}

Disabled and constant string prop

{
  "schema": {
    "type": "object",
    "properties": {
      "disabledTextbox": {
        "type": "string",
        "enabledIf": "return false",
        "title": "I'm disabled"
      },
      "constExample": {
        "title": "Constant textbox",
        "type": "string",
        "const": "This textbox has constant value"
      }
    }
  },
  "layout": {
    "type": "div",
    "items": [
      {
        "key": "disabledTextbox"
      },
      {
        "key": "constExample"
      }
    ]
  }
}

Limited/specific format string prop

{
  "schema": {
    "type": "object",
    "properties": {
      "limitedTextbox": {
        "type": "string",
        "maxLength": 7,
        "minLength": 3
      },
      "emailFormat": {
        "type": "string",
        "format": "email",
        "title": "Email"
      }
    }
  },
  "layout": {
    "type": "div",
    "items": [
      {
        "key": "limitedTextbox",
        "placeholder": "Limited text box"
      },
      {
        "type": "hr"
      },
      {
        "key": "emailFormat"
      },
      {
        "type": "hr"
      },
      {
        "htmlClass": "text-center",
        "type": "heading",
        "title": "There are more formats than just one available for string type!",
        "level": 5
      },
      {
        "type": "span",
        "title": "Available formats: email, hostname, uri, uri-reference, ipv4, ipv6, mac, date-time, date, time, regex, color, credit-card, phone"
      }
    ]
  }
}

Number input examples

{
  "schema": {
    "type": "object",
    "properties": {
      "normalNumberInput": {
        "type": "integer",
        "title": "Number input"
      },
      "minMaxNumberInput": {
        "type": "integer",
        "title": "Min/Max number input",
        "minimum": 0,
        "maximum": 1000,
        "required": true
      },
      "disabledNumberInput": {
        "type": "integer",
        "title": "Disabled number input box",
        "enabledIf": "return false"
      }
    }
  },
  "layout": {
    "type": "div",
    "items": [
      {
        "placeholder": "312",
        "key": "normalNumberInput"
      },
      {
        "key": "minMaxNumberInput"
      },
      {
        "key": "disabledNumberInput"
      }
    ]
  }
}