{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "textarea",
    "type": "registry:component",
    "title": "Textarea",
    "description": "Multiline text field that mirrors the input styling. Supports a hint, an error and an invalid state set with aria-invalid.",
    "registryDependencies": [
        "tokens",
        "input"
    ],
    "meta": {
        "category": "Forms",
        "layout": "form"
    },
    "files": [
        {
            "path": "components/textarea.html",
            "type": "registry:file",
            "target": "components/textarea.html",
            "content": "<!-- Textarea\n     Wrap label, textarea and hint in .dp-field.\n     Invalid state: aria-invalid=\"true\". -->\n\n<div class=\"dp-field\">\n  <label class=\"dp-label\" for=\"notes\">Notes</label>\n  <textarea class=\"dp-textarea\" id=\"notes\" placeholder=\"Add context for this query\"></textarea>\n  <span class=\"dp-hint\">Markdown is not supported.</span>\n</div>\n\n<div class=\"dp-field\">\n  <label class=\"dp-label\" for=\"reason\">Reason</label>\n  <textarea class=\"dp-textarea\" id=\"reason\" aria-invalid=\"true\"\n            aria-describedby=\"reason-error\">x</textarea>\n  <span class=\"dp-error\" id=\"reason-error\">Give at least 10 characters.</span>\n</div>\n"
        },
        {
            "path": "components/textarea.css",
            "type": "registry:file",
            "target": "components/textarea.css",
            "content": "/* Textarea\n   Multiline text field. Mirrors the input field styling. Wrap label, control\n   and hint in .dp-field. Mark an invalid field with aria-invalid=\"true\".\n   All colour, radius and type come from tokens.css. */\n\n.dp-textarea {\n  width: 100%;\n  min-height: 6rem;\n  resize: vertical;\n  font-family: var(--dp-font-sans);\n  font-size: var(--dp-text-base);\n  line-height: var(--dp-leading-normal);\n  color: var(--dp-navy);\n  background: var(--dp-white);\n  border: 1px solid var(--dp-border-neutral);\n  border-radius: var(--dp-radius-xs);\n  padding: var(--dp-space-3);\n  transition: border-color var(--dp-transition), box-shadow var(--dp-transition);\n}\n\n.dp-textarea::placeholder {\n  color: var(--dp-text-subtle);\n}\n\n.dp-textarea:hover {\n  border-color: var(--dp-blue-400);\n}\n\n.dp-textarea:focus {\n  outline: none;\n  border-color: var(--dp-primary-bg);\n  box-shadow: var(--dp-shadow-focus);\n}\n\n.dp-textarea:disabled {\n  background: var(--dp-neutral-200);\n  color: var(--dp-text-subtle);\n  cursor: not-allowed;\n}\n\n.dp-textarea[aria-invalid=\"true\"] {\n  border-color: var(--dp-danger);\n}\n\n.dp-textarea[aria-invalid=\"true\"]:focus {\n  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);\n}\n"
        }
    ]
}