shadcn-rails

Textarea

Displays a form textarea or a component that looks like a textarea.

No JavaScript Required
textarea/default 
<%= render Shadcn::TextareaComponent.new(placeholder: "Enter your text...") %>

Installation

Add the component to your project:

rails generate shadcn:add textarea

Usage

<%= render Shadcn::TextareaComponent.new(placeholder: "Enter your text...") %>

Examples

Default

<%= render Shadcn::TextareaComponent.new(placeholder: "Enter your text...") %>

With Label

<div class="grid w-full gap-1.5">
  <%= render Shadcn::LabelComponent.new(for: "message-demo") { "Your message" } %>
  <%= render Shadcn::TextareaComponent.new(id: "message-demo", placeholder: "Type your message here.") %>
</div>

With Helper Text

You can @mention other users and organizations.

<div class="grid w-full gap-1.5">
  <%= render Shadcn::LabelComponent.new(for: "bio-demo") { "Your bio" } %>
  <%= render Shadcn::TextareaComponent.new(id: "bio-demo", placeholder: "Tell us a little bit about yourself") %>
  <p class="text-sm text-muted-foreground">You can @mention other users and organizations.</p>
</div>

Custom Rows

Use the rows prop to set the number of visible rows.

<div class="grid gap-4 w-full max-w-md">
  <%= render Shadcn::TextareaComponent.new(rows: 2, placeholder: "2 rows") %>
  <%= render Shadcn::TextareaComponent.new(rows: 6, placeholder: "6 rows") %>
</div>

Disabled

<%= render Shadcn::TextareaComponent.new(disabled: true, placeholder: "Disabled textarea") %>

With Button

<div class="grid w-full gap-2">
  <%= render Shadcn::TextareaComponent.new(placeholder: "Type your message here.") %>
  <%= render Shadcn::ButtonComponent.new do %>Send message<% end %>
</div>

With Value

textarea/with_value 
<%= render Shadcn::TextareaComponent.new( name: "description", value: "This is a pre-filled textarea with some initial content.", placeholder: "Enter description..." ) %>

Readonly

textarea/readonly 
<%= render Shadcn::TextareaComponent.new( name: "readonly_field", value: "This textarea is readonly. You can select and copy the text, but you cannot edit it.", readonly: true ) %>

With Character Limit

textarea/with_character_limit 
<%= render Shadcn::TextareaComponent.new( name: "limited_text", placeholder: "Maximum 280 characters...", maxlength: 280 ) %>

Required Field

{:args=>{}, :block=>nil, :component=>#<Shadcn::TextareaComponent:0x00007f872e726548 @class_name=nil, @data={}, @html_options={}, @constructor_block=nil, @name="comment", @id="comment", @value=nil, @placeholder="Please enter at least 10 characters...", @rows=3, @cols=nil, @disabled=false, @required=true, @readonly=false, @autofocus=false, @minlength=10, @maxlength=nil>, :locals=>{}, :template=>"view_components/preview"}
textarea/required_field 
<form class="space-y-2">
  <label for="comment" class="text-sm font-medium">Comment (required)</label>
  <%= render Shadcn::Textarea.new(
    id: "comment",
    name: "comment",
    placeholder: "Please enter at least 10 characters...",
    required: true,
    minlength: 10
  ) %>
</form>

With Label and Description

textarea/with_label_and_description 
<%= render Shadcn::TextareaComponent.new( id: "bio", name: "bio", placeholder: "Tell us a little bit about yourself", rows: 4 ) %>

Autofocus

textarea/autofocus 
<%= render Shadcn::TextareaComponent.new( name: "autofocus_field", placeholder: "This textarea will be focused on load", autofocus: true ) %>

With Custom Styling

textarea/with_custom_styling 
<%= render Shadcn::TextareaComponent.new( name: "custom_styled", placeholder: "Custom styled textarea", class_name: "font-mono text-xs resize-none" ) %>

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 LabelComponent for accessibility
  • Disabled state uses native disabled attribute