​Vertical Categories Object Editor

Displays object properties grouped into tabs arranged vertically on the left side. Primitive properties are automatically grouped into a default category, while nested objects and arrays each get their own tab.

​Activation Conditions

  • "type": "object"
  • "x-format": "categories-vertical"

​Options

  • "x-categoriesDefaultLabel" — label for the default tab that groups primitive properties (defaults to "Basic")
  • "x-category" — set on a child property schema to assign it to a named tab
  • "x-navWarning" — show a warning indicator on tabs that contain validation errors
  • "x-navWarningMessage" — custom message shown in the tab warning indicator
  • "x-categoryOrder" — array of category names that controls the tab display order; listed categories appear first in the given order, unlisted ones follow
  • "x-format": "categories-vertical-N" — use a multi-column layout where N is the number of columns (e.g. "categories-vertical-3")

​Example 

{
  "type": "object",
  "title": "Categories Vertical",
  "x-format": "categories-vertical",
  "properties": {
    "name": {
      "type": "string",
      "title": "Name",
      "description": "Your full name",
      "minLength": 1
    },
    "age": {
      "type": "integer",
      "title": "Age",
      "description": "Your age",
      "minimum": 0
    },
    "email": {
      "type": "string",
      "title": "Email",
      "description": "Your email address",
      "x-category": "Contact"
    },
    "address": {
      "type": "object",
      "title": "Address",
      "description": "Your home address",
      "properties": {
        "street": {
          "type": "string",
          "title": "Street",
          "description": "Street address"
        },
        "city": {
          "type": "string",
          "title": "City",
          "description": "City name"
        },
        "zip": {
          "type": "string",
          "title": "ZIP Code",
          "description": "Postal code"
        }
      }
    },
    "tags": {
      "type": "array",
      "title": "Tags",
      "description": "List of tags",
      "items": {
        "type": "string",
        "title": "Tag"
      }
    }
  }
}