{
  "element": "nve-input-group",
  "entrypoint": "@nvidia-elements/core/input/input-group.examples.json",
  "items": [
    {
      "id": "input-input-group",
      "name": "Default",
      "template": "<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly>.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>\n",
      "summary": "Input group combining select, input, and button for composite controls like domain URL entry.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "input-input-group-filter-group-range",
      "name": "FilterGroupRange",
      "template": "<div nve-layout=\"row align:vertical-center\">\n  <nve-input-group>\n    <nve-select style=\"width: 150px\">\n      <select aria-label=\"date type\">\n        <option value=\"1\">recording date</option>\n        <option value=\"2\">process date</option>\n      </select>\n    </nve-select>\n    <nve-date style=\"width: 220px\">\n      <nve-button container=\"flat\" readonly>start</nve-button>\n      <input type=\"date\" value=\"2022-05-11\" aria-label=\"start date\" />\n    </nve-date>\n    <nve-date style=\"width: 220px\">\n      <nve-button container=\"flat\" readonly>end</nve-button>\n      <input type=\"date\" value=\"2022-12-07\" aria-label=\"end date\" />\n    </nve-date>\n    <nve-icon-button aria-label=\"remove filter\" icon-name=\"cancel\"></nve-icon-button>\n  </nve-input-group>\n</div>\n",
      "summary": "Input group with date range filters combining select and date inputs for filtering data by time periods.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "input-input-group-responsive-width",
      "name": "ResponsiveWidth",
      "template": "<div nve-layout=\"row align:vertical-center\" style=\"width: 700px\">\n  <nve-input-group style=\"--width: 100%\">\n    <label>domain</label>\n    <nve-select style=\"width: 130px\">\n      <select aria-label=\"protocol\">\n        <option>https://</option>\n        <option>http://</option>\n      </select>\n    </nve-select>\n    <nve-input nve-layout=\"full\">\n      <input placeholder=\"example.com\" type=\"url\" aria-label=\"host\" />\n      <nve-button container=\"flat\" readonly>.com</nve-button>\n    </nve-input>\n    <nve-input style=\"width: 130px\">\n      <input placeholder=\"Enter port\" type=\"number\" aria-label=\"port\" />\n    </nve-input>\n    <nve-control-message>host: 123456</nve-control-message>\n  </nve-input-group>\n</div>\n",
      "summary": "Input group with children that grow to fill available space.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    }
  ]
}