{
  "element": "nve-checkbox",
  "entrypoint": "@nvidia-elements/core/checkbox/checkbox.examples.json",
  "items": [
    {
      "id": "checkbox",
      "name": "Default",
      "template": "<nve-checkbox>\n  <label>label</label>\n  <input type=\"checkbox\" checked />\n</nve-checkbox>\n",
      "summary": "Basic checkbox component with label for binary selection and form input.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "checkbox-states",
      "name": "States",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox>\n  <nve-checkbox>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox>\n  <nve-checkbox>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-checkbox>\n  <nve-checkbox>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-checkbox>\n</div>\n",
      "summary": "Checkbox states including default, disabled, success, and error with control messages for validation feedback.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "checkbox-vertical-group",
      "name": "VerticalGroup",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group>\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group>\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group>\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group>\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
      "summary": "Checkbox group with vertical layout for related options stacked in a column with validation states.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "checkbox-vertical-inline-group",
      "name": "VerticalInlineGroup",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
      "summary": "Checkbox group with vertical inline layout for compact vertical stacking with inline label positioning.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "checkbox-horizontal-group",
      "name": "HorizontalGroup",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
      "summary": "Checkbox group with horizontal layout for related options arranged in a row, ideal for limited choices.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "checkbox-horizontal-inline-group",
      "name": "HorizontalInlineGroup",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
      "summary": "Checkbox group with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "checkbox-indeterminate",
      "name": "Indeterminate",
      "template": "<nve-checkbox>\n  <label>checkbox 1</label>\n  <input type=\"checkbox\" checked id=\"indeterminate\" />\n</nve-checkbox>\n<script type=\"module\">\n  document.querySelector(\"#indeterminate\").indeterminate = true;\n</script>\n",
      "summary": "Checkbox with indeterminate state for representing partial selection or mixed values in hierarchical lists.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}