Steplist

Step lists display progress through a sequence of steps, with each step marked as completed, current, or incomplete.

{
  "slug": "steplist",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/steplist.json",
  "title": "Steplist",
  "description": "Step lists display progress through a sequence of steps, with each step marked as completed, current, or incomplete.",
  "meta": {
    "category": "navigation",
    "documentationUrl": "https://spectrum.adobe.com/page/steplist/"
  },
  "type": "object",
  "properties": {
    "orientation": {
      "type": "string",
      "enum": [
        "horizontal",
        "vertical"
      ],
      "default": "horizontal"
    },
    "items": {
      "type": "array",
      "description": "An array of step items in the step list.",
      "items": {
        "type": "object",
        "properties": {
          "label": {
            "type": "string",
            "description": "The text displayed for the step item."
          },
          "isDisabled": {
            "type": "boolean",
            "default": false,
            "description": "Whether the step item is disabled."
          },
          "stepState": {
            "type": "string",
            "enum": [
              "completed default",
              "completed hover",
              "current default",
              "incomplete default"
            ],
            "default": "current default",
            "description": "The current state of the step item."
          }
        },
        "required": [
          "label",
          "stepState"
        ]
      }
    },
    "currentStep": {
      "type": "string",
      "description": "The identifier or label of the currently active step."
    }
  }
}