Textarea

Examples

Default

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

<%= render "ui/textarea", placeholder: "Type your message here." %>

<%= render UI::Textarea.new(placeholder: "Type your message here.") %>

<%= render UI::TextareaComponent.new(placeholder: "Type your message here.") %>

Disabled

A disabled textarea.

<%= render "ui/textarea", placeholder: "Type your message here.", attributes: { disabled: true } %>

<%= render UI::Textarea.new(placeholder: "Type your message here.", disabled: true) %>

<%= render UI::TextareaComponent.new(placeholder: "Type your message here.", disabled: true) %>

With Label

Textarea with an associated label.

Your message

<div class="grid w-full gap-1.5">
  <%= render "ui/label", for: "message" do %>Your message<% end %>
  <%= render "ui/textarea", id: "message", placeholder: "Type your message here." %>
</div>

Your message

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

Your message

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

With Text

Textarea with helper text.

Your message

Your message will be copied to the support team.

<div class="grid w-full gap-1.5">
  <%= render "ui/label", for: "message-2" do %>Your message<% end %>
  <%= render "ui/textarea", id: "message-2", placeholder: "Type your message here." %>
  <p class="text-sm text-muted-foreground">Your message will be copied to the support team.</p>
</div>

Your message

Your message will be copied to the support team.

<div class="grid w-full gap-1.5">
  <%= render UI::Label.new(for: "message-2") { "Your message" } %>
  <%= render UI::Textarea.new(id: "message-2", placeholder: "Type your message here.") %>
  <p class="text-sm text-muted-foreground">Your message will be copied to the support team.</p>
</div>

Your message

Your message will be copied to the support team.

<div class="grid w-full gap-1.5">
  <%= render(UI::LabelComponent.new(for: "message-2")) { "Your message" } %>
  <%= render UI::TextareaComponent.new(id: "message-2", placeholder: "Type your message here.") %>
  <p class="text-sm text-muted-foreground">Your message will be copied to the support team.</p>
</div>

With Button

Textarea with a button.

<div class="grid w-full gap-2">
  <%= render "ui/textarea", placeholder: "Type your message here." %>
  <%= render "ui/button", content: "Send message" %>
</div>

<div class="grid w-full gap-2">
  <%= render UI::Textarea.new(placeholder: "Type your message here.") %>
  <%= render UI::Button.new { "Send message" } %>
</div>

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

Features

Custom styling with Tailwind classes
Disabled state support
ARIA attributes for accessibility

API Reference

Textarea

Parameters

Name	Type	Default	Description
placeholder	String	nil	Placeholder text when no value is selected
value	String		The current value
name	String	nil	Form field name
id	String	nil	HTML id attribute
rows	String	nil	The rows