​Horizontal Categories Object Editor

Displays object properties grouped into tabs arranged horizontally across the top. 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-horizontal"

​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

​Example 

{
  "type": "object",
  "title": "Categories Horizontal",
  "x-format": "categories-horizontal",
  "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"
      }
    }
  }
}

​Category Order Example

Use "x-categoryOrder" to control the tab sequence. Tabs listed in the array appear first; any others follow in natural order.

​Example 

{
  "type": "object",
  "title": "Category Order",
  "x-format": "categories-horizontal",
  "x-categoryOrder": [
    "Contact",
    "Address",
    "Tags",
    "Basic"
  ],
  "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"
      }
    }
  }
}