{
  "element": "nve-switch",
  "entrypoint": "@nvidia-elements/core/switch/switch.examples.json",
  "items": [
    {
      "id": "switch",
      "name": "Default",
      "template": "<nve-switch>\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>\n",
      "summary": "Basic toggle switch for binary on/off controls and feature activation.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "switch-size",
      "name": "Size",
      "template": "<nve-switch\n  style=\"\n    --width: var(--nve-ref-size-800);\n    --height: var(--nve-ref-size-400);\n    --anchor-width: calc(var(--nve-ref-size-200) + var(--nve-ref-size-50));\n    --anchor-height: calc(var(--nve-ref-size-200) + var(--nve-ref-size-50));\n  \"\n>\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>\n",
      "summary": "Size variants of toggle switches use custom CSS properties.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "switch-states",
      "name": "States",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-switch>\n</div>\n",
      "summary": "Toggle switches with different states including default, disabled, success, and error with control messages.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "switch-vertical-group",
      "name": "VerticalGroup",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group>\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
      "summary": "Switch groups with vertical layout for many related toggles stacked in a column with validation states.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "switch-vertical-inline-group",
      "name": "VerticalInlineGroup",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
      "summary": "Switch groups with vertical inline layout for compact vertical stacking with inline label positioning.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "switch-horizontal-group",
      "name": "HorizontalGroup",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
      "summary": "Switch groups with horizontal layout for many toggles arranged in a row, ideal for limited options.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "switch-horizontal-inline-group",
      "name": "HorizontalInlineGroup",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
      "summary": "Switch groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}