{
  "element": "nve-textarea",
  "entrypoint": "@nvidia-elements/core/textarea/textarea.examples.json",
  "items": [
    {
      "id": "textarea",
      "name": "Default",
      "template": "<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>\n",
      "summary": "Basic multi-line text input for longer content entry like comments, descriptions, or messages.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "textarea-vertical",
      "name": "Vertical",
      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-textarea>\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea>\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea>\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea>\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>\n",
      "summary": "Textareas with vertical layout including validation states for disabled, success, and error.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "textarea-horizontal",
      "name": "Horizontal",
      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-textarea layout=\"horizontal\">\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea layout=\"horizontal\">\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea layout=\"horizontal\">\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea layout=\"horizontal\">\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>\n",
      "summary": "Textareas with horizontal layout showing validation states for inline forms and compact layouts.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "textarea-control-validation",
      "name": "ControlValidation",
      "template": "<nve-textarea>\n  <label>validation</label>\n  <textarea required></textarea>\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-textarea>\n",
      "summary": "Textarea with built-in HTML validation showing required field error messages for form validation.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "textarea-columns-and-rows",
      "name": "ColumnsAndRows",
      "template": "<nve-textarea>\n  <label>label</label>\n  <textarea rows=\"15\" cols=\"40\"></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>\n",
      "summary": "Textarea with custom columns and rows attributes for controlling initial size and dimensions.",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}