Textarea

Displays a textarea, or a component that looks like one.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add textarea --yes

The textarea registry item installs these files:

app/components/ui_component.rb
app/components/ui/textarea_component.rb
app/helpers/ui/textarea_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

Use the ui_textarea helper in any view. The block becomes the textarea's initial value.

<%= ui_textarea(name: "post[body]", placeholder: "Type your message here.") %>

Or render the component Ui::TextareaComponent directly:

<%= render Ui::TextareaComponent.new(placeholder: "Type your message here.") do %>
  Initial content
<% end %>

Examples

Default

A textarea in the shadcn style. It grows with its content, using field-sizing.

<%= ui_textarea(placeholder: "Type your message here.", class: "max-w-sm") %>

With a label

Pair it with ui_label for accessible forms.

Your message

<div class="grid w-full max-w-sm gap-2">
  <%= ui_label(for: "textarea-message") { "Your message" } %>
  <%= ui_textarea(id: "textarea-message", placeholder: "Type your message here.") %>
</div>

Disabled

Pass disabled: true as an HTML attribute.

<%= ui_textarea(placeholder: "Disabled", disabled: true, class: "max-w-sm") %>

API reference

ui_textarea(**options, &block) wraps Ui::TextareaComponent.new(**options).

Argument	Type	Default	Description
`class` / `class_name`	String	`nil`	Extra classes, merged after the base classes.
`**attrs`	Hash	`{}`	Free HTML attributes (`name`, `rows`, `placeholder`, `disabled`, `data:`, `aria:`, …).
`&block`	Block	—	The textarea's initial value.