Interactive Components

Button

{
 type: "button", 
 id: "pick-another", 
 variant: 'outlined', 
 size: 'small', 
 label: "Pick another template", 
 action: { 
  type: "submit"
 }
}

properties: size: , variant:

Input

{ 
 "type": "input", 
 "id": "unsaved-1", 
 "label": "Unsaved", 
 "placeholder": "Enter input here...", 
 "save_state": "unsaved" 
},

Text Area

{ "type": "textarea", 
    "id": "textarea-3", 
    "name": "textarea-3", 
    "label": "Error", 
    "placeholder": "Enter text here...", 
    "value": "Value entered in JSON.",
    "errors": {"textarea-3": ["uno error"]
    }
}

List

{ "type": "list", 
    "disabled": false, 
  "items": [ 
        {"type": "item",
            "id": "list-item-1",
            "title": "Item 1",
            "action": {"type": "submit"}
    },
        {"type": "item",
         "id": "list-item-4",
            "title": "Item 4",
            "subtitle": "With Action",
            "action": {"type": "submit"}
        },
        {"type": "item",
            "id": "list-item-2",
            "title": "Item 2",
            "subtitle": "Show Text areas",
            "tertiary_text": "With Tertiary Text", 
            "action": {"type": "submit"}
        },
        {"type": "item",
            "id": "list-item-6",
            "title": "Item 6",
            "subtitle": "Show dropdowns",
            "tertiary_text": "With Tertiary Text",
            "action": {"type": "submit"}
        },
        {"type": "item",
            "id": "list-item-7",
            "title": "Item 7",
            "subtitle": "Checkboxes",
            "tertiary_text": "With Tertiary Text",
            "action": {"type": "submit"}
        },
        {"type": "item",
            "id": "list-item-8",
            "title": "Item 8",
            "subtitle": "Inputs",
            "tertiary_text": "With inputut pupx",
            "action": {"type": "submit"}
        }
    ]
}

Single-Select

{
    "type": "single-select",
    "id": "checkbox-1",
    "label": "Unsaved Options",
    "options": [
        {
          "type": "option",
          "id": "option-1",
          "text": "Option 1",
          "action": {
            "type": "submit"
          }
        }
    ]
}

Checkbox

{
    "type": "checkbox",
    "id": "checkbox-1",
    "label": "Unsaved Options",
    "options": [
        {"type": "option","id": "option-1","text": "Option 1"},
        {"type": "option","id": "option-2","text": "Option 2"}
    ]
}

Dropdown

{
    "type": "dropdown",
    "id": "dropdown-1",
    "label": "Unsaved Options",
    "options": [
        {"type": "option","id": "option-1","text": "Option 1"},
        {"type": "option","id": "option-2","text": "Option 2"}
    ]
}