{"name":"textarea","title":"Textarea","description":"Displays a form textarea or a component that looks like a textarea.","installCommand":"bunx marko-ui add textarea -y","usageTags":"<Textarea>","importSnippet":"import Textarea from \"@/components/ui/textarea/textarea.marko\";","usageSnippet":"<Textarea placeholder=\"Type your message here.\" />","tags":["Textarea"],"parts":[],"props":[],"events":[],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"textarea-demo","title":"Default","source":"import Textarea from \"@marko-ui/shadcn/ui/textarea/textarea.marko\";\n\n<Textarea placeholder=\"Type your message here.\" />","description":"A plain textarea with a placeholder."},{"id":"textarea-field","title":"With label","source":"import Textarea from \"@marko-ui/shadcn/ui/textarea/textarea.marko\";\nimport Label from \"@marko-ui/shadcn/ui/label/label.marko\";\n\n<div class=\"grid w-full gap-1.5\">\n  <Label for=\"message\">Your message</Label>\n  <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n</div>","description":"Pair a textarea with a `Label` via a shared id."},{"id":"textarea-with-text","title":"With text","source":"import Textarea from \"@marko-ui/shadcn/ui/textarea/textarea.marko\";\nimport Label from \"@marko-ui/shadcn/ui/label/label.marko\";\n\n<div class=\"grid w-full gap-1.5\">\n  <Label for=\"message-2\">Your message</Label>\n  <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n  <p class=\"text-muted-foreground text-sm\">Your message will be copied to the support team.</p>\n</div>","description":"Add helper text below the textarea to explain its purpose."},{"id":"textarea-with-value","title":"With value","source":"import Textarea from \"@marko-ui/shadcn/ui/textarea/textarea.marko\";\n\n<Textarea aria-label=\"Feedback\" value=\"This is some existing feedback that a user has already typed into the textarea. It demonstrates how the field grows with field-sizing-content as content wraps across multiple lines.\" />","description":"Uncontrolled initial content. `field-sizing-content` grows the textarea with its content as the user types."},{"id":"textarea-disabled","title":"Disabled","source":"import Textarea from \"@marko-ui/shadcn/ui/textarea/textarea.marko\";\n\n<Textarea disabled placeholder=\"Type your message here.\" />","description":"A disabled textarea is skipped by the tab order and ignores pointer input."},{"id":"textarea-invalid","title":"Invalid","source":"import Textarea from \"@marko-ui/shadcn/ui/textarea/textarea.marko\";\n\n<Textarea aria-invalid=\"true\" placeholder=\"Type your message here.\" />","description":"Set `aria-invalid` to mark the textarea as invalid.","essential":true},{"id":"textarea-button","title":"Button","source":"import Textarea from \"@marko-ui/shadcn/ui/textarea/textarea.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<div class=\"grid w-full gap-2\">\n  <Textarea placeholder=\"Type your message here.\"/>\n  <Button type=\"button\">Send message</Button>\n</div>","description":"Pair a textarea with a `Button` to create a message composer."},{"id":"textarea-rtl","title":"RTL","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport Textarea from \"@marko-ui/shadcn/ui/textarea/textarea.marko\";\n\n<Field class=\"w-full max-w-xs\" dir=\"rtl\">\n  <FieldLabel for=\"textarea-rtl-feedback\">التعليقات</FieldLabel>\n  <Textarea id=\"textarea-rtl-feedback\" placeholder=\"تعليقاتك تساعدنا على التحسين...\" dir=\"rtl\" rows=4/>\n  <FieldDescription>شاركنا أفكارك حول خدمتنا.</FieldDescription>\n</Field>","description":"Textareas restyle correctly under `dir=\"rtl\"` — logical Tailwind properties, not physical ones, drive layout and text alignment."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"textarea"}