Textarea
Displays a form textarea or a component that looks like a textarea.
No JavaScript Required
Installation
Add the component to your project:
rails generate shadcn:component textarea
Usage
<%= render Shadcn::TextareaComponent.new(placeholder: "Type your message here.") %>
Examples
Default
With Label
<div class="grid w-full gap-1.5">
<%= render Shadcn::LabelComponent.new(for: "message") { "Your message" } %>
<%= render Shadcn::TextareaComponent.new(id: "message", placeholder: "Type your message here.") %>
</div>
With Helper Text
You can @mention other users and organizations.
Custom Rows
Use the rows prop to set the number of visible rows.
Disabled
<%= render Shadcn::TextareaComponent.new(disabled: true, placeholder: "Disabled textarea") %>
With Button
API Reference
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| name |
String
|
nil
|
Textarea name attribute |
| id |
String
|
nil
|
Textarea id attribute |
| value |
String
|
nil
|
Initial value |
| placeholder |
String
|
nil
|
Placeholder text |
| rows |
Integer
|
3
|
Number of visible rows |
| cols |
Integer
|
nil
|
Number of visible columns |
| disabled |
Boolean
|
false
|
Whether the textarea is disabled |
| required |
Boolean
|
false
|
Whether the textarea is required |
| readonly |
Boolean
|
false
|
Whether the textarea is readonly |
| minlength |
Integer
|
nil
|
Minimum character length |
| maxlength |
Integer
|
nil
|
Maximum character length |
Accessibility
- Uses native
<textarea>element for proper accessibility - Always pair textareas with
LabelComponentfor accessibility - Disabled state uses native
disabledattribute
On This Page