{
  "element": "nve-radio",
  "entrypoint": "@nvidia-elements/core/radio/radio.examples.json",
  "items": [
    {
      "id": "radio",
      "name": "Default",
      "template": "<nve-radio-group>\n  <label>label</label>\n  <nve-radio>\n    <label>radio 1</label>\n    <input type=\"radio\" checked />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 2</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 3</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-control-message>message</nve-control-message>\n</nve-radio-group>\n",
      "summary": "Basic radio button group for mutually exclusive single-choice selection from many options.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "radio-vertical-group",
      "name": "VerticalGroup",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group>\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group>\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group>\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group>\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
      "summary": "Radio groups with vertical layout including validation states for disabled, success, and error.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "radio-vertical-inline-group",
      "name": "VerticalInlineGroup",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
      "summary": "Radio groups with vertical inline layout for compact vertical stacking with inline label positioning.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "radio-horizontal-group",
      "name": "HorizontalGroup",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
      "summary": "Radio groups with horizontal layout for options arranged in a row, ideal for limited choices.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "radio-horizontal-inline-group",
      "name": "HorizontalInlineGroup",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
      "summary": "Radio groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}