Tabs

Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.

{
  "slug": "tabs",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/tabs.json",
  "title": "Tabs",
  "description": "Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.",
  "meta": {
    "category": "navigation",
    "documentationUrl": "https://spectrum.adobe.com/page/tabs/"
  },
  "type": "object",
  "properties": {
    "orientation": {
      "type": "string",
      "enum": [
        "horizontal",
        "vertical"
      ],
      "default": "horizontal"
    },
    "items": {
      "type": "array",
      "description": "An array of tab items.",
      "items": {
        "type": "object",
        "properties": {
          "label": {
            "type": "string",
            "description": "The text displayed for the tab item."
          },
          "isDisabled": {
            "type": "boolean",
            "default": false,
            "description": "Whether the tab is disabled."
          },
          "state": {
            "type": "string",
            "enum": [
              "default",
              "hover",
              "keyboard focus"
            ],
            "default": "default",
            "description": "The interaction state of the tab item."
          },
          "contentVariant": {
            "type": "string",
            "enum": [
              "label-only",
              "icon-only",
              "icon-label"
            ],
            "default": "icon-label",
            "description": "Controls whether the tab displays a label, an icon, or both."
          },
          "density": {
            "type": "string",
            "enum": [
              "compact",
              "regular"
            ],
            "default": "regular"
          },
          "isFluid": {
            "type": "boolean",
            "default": false,
            "description": "This overrides density and is only applicable to horizontal tabs."
          },
          "isEmphasized": {
            "type": "boolean",
            "default": false
          },
          "alignment": {
            "type": "string",
            "enum": [
              "start",
              "center"
            ],
            "default": "start"
          },
          "selectedItem": {
            "description": "(list of available items)"
          },
          "keyboardActivation": {
            "type": "string",
            "enum": [
              "manual",
              "automatic"
            ],
            "default": "manual"
          }
        }
      }
    }
  }
}