{
  "name": "textarea",
  "displayName": "Textarea",
  "type": "native",
  "isCustomElement": false,
  "tag": null,
  "nativeTag": "textarea",
  "selector": ".l-textarea",
  "subItemOf": null,
  "summary": "Textareas let users enter and edit multi-line text.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/textarea",
    "js": null
  },
  "properties": [],
  "attributes": [
    {
      "name": "rows",
      "data": false,
      "values": [],
      "description": "Number of visible text lines — sets the initial height."
    },
    {
      "name": "data-size",
      "data": true,
      "values": [
        "xs",
        "sm",
        "md",
        "lg",
        "xl"
      ],
      "description": "Single-line min-height on the shared `--l-size-control-*` scale (default `md`). Affects only the control, not the label or hint/error."
    },
    {
      "name": "data-resize",
      "data": true,
      "values": [
        "vertical",
        "none",
        "both",
        "auto"
      ],
      "description": "User resize handle. Defaults to `vertical`. `auto` grows the box with its content via `field-sizing` (progressive: falls back to the `rows` height where unsupported)."
    },
    {
      "name": "placeholder",
      "data": false,
      "values": [],
      "description": "Native placeholder text."
    },
    {
      "name": "disabled",
      "data": false,
      "values": [],
      "description": "Disables the textarea."
    },
    {
      "name": "required",
      "data": false,
      "values": [],
      "description": "Marks the textarea as required for form submission."
    },
    {
      "name": "readonly",
      "data": false,
      "values": [],
      "description": "Makes the textarea read-only."
    },
    {
      "name": "maxlength",
      "data": false,
      "values": [],
      "description": "Native maximum character count."
    },
    {
      "name": "aria-invalid",
      "data": false,
      "values": [],
      "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
    }
  ],
  "events": [],
  "methods": [],
  "slots": [],
  "cssClasses": [
    {
      "name": ".l-textarea",
      "description": "Base textarea style, applied to a `<textarea>`. Inside `l-form-field` a bare textarea is auto-styled, so the class is optional there."
    }
  ],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--height",
      "default": "var(--l-form-control-height)",
      "description": "Single-line min-height; `rows` grows the control from here."
    },
    {
      "name": "--border-radius",
      "default": "var(--l-form-control-border-radius)",
      "description": "Control border radius."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "Default",
      "language": "html",
      "code": "<textarea class=\"l-textarea\" rows=\"4\" placeholder=\"Placeholder text\"></textarea>"
    },
    {
      "title": "In a field (no class needed)",
      "language": "html",
      "code": "<l-form-field>\n<label>Message</label>\n<textarea rows=\"4\"></textarea>\n<p class=\"l-hint\">Tell us what's on your mind.</p>\n</l-form-field>"
    },
    {
      "title": "Auto-growing",
      "language": "html",
      "code": "<textarea class=\"l-textarea\" data-resize=\"auto\" rows=\"2\"></textarea>"
    }
  ]
}