Textarea

UI::Textarea

A multi-line text field with label, hint and error, that can grow with its text.

# VelvetKit ## Textarea (`UI::Textarea`) A multi-line text field with label, hint and error, that can grow with its text. Add it: `bin/rails generate velvetkit:add textarea` Also adds: `label`, `form_field` ### Arguments ```ruby UI::Textarea.new(size: :default, rows: 3, resize: :vertical, autogrow: false, label: nil, label_size: :default, label_weight: :medium, hint: nil, required: false, error: nil, disabled: false, value: nil, form: nil, field: nil, class: nil, **html_attrs) ``` ### Notes A multi-line text field, with the same label, hint, required, error and form-builder options as UI::Input. `autogrow: true` grows the box with its text (CSS field-sizing, no JavaScript); browsers without it keep `rows:` lines and scroll. Cap the height with a class such as `max-h-60`. ### Example: Default ```erb <div class="max-w-md"> <%= render(UI::Textarea.new(label: "Feedback", placeholder: "What could we do better?", rows: 4)) %> </div> ``` ### Example: Grows with its text ```erb <div class="max-w-md"> <%= render(UI::Textarea.new(label: "Comment", autogrow: true, class: "max-h-60", placeholder: "Type a few lines; the box grows with them, up to a limit.")) %> </div> ``` ### Example: States ```erb <div class="flex flex-col gap-4 max-w-md"> <%= render(UI::Textarea.new(label: "Bio", value: "Rails developer who likes accessible UI.")) %> <%= render(UI::Textarea.new(label: "Reason", required: true, placeholder: "Required")) %> <%= render(UI::Textarea.new(label: "Summary", error: true, value: "Too short")) %> <%= render(UI::Textarea.new(label: "Notes", disabled: true, value: "Locked after review")) %> <%= render(UI::Textarea.new(label: "Fixed size", resize: :none, placeholder: "Can't be resized")) %> </div> ``` ### Example: All Sizes ```erb <div class="flex flex-col gap-3 max-w-md"> <%= render(UI::Textarea.new(size: :sm, rows: 2, placeholder: "Small")) %> <%= render(UI::Textarea.new(rows: 2, placeholder: "Default")) %> <%= render(UI::Textarea.new(size: :lg, rows: 2, placeholder: "Large")) %> </div> ```

bin/rails generate velvetkit:add textarea

Also adds: Label Form field
Stimulus: None, it's server-rendered
Installs: Nothing

Examples

Default

Feedback

default.html.erb

<div class="max-w-md">
  <%= render(UI::Textarea.new(label: "Feedback", placeholder: "What could we do better?", rows: 4)) %>
</div>

Grows with its text

Comment

autogrow.html.erb

<div class="max-w-md">
  <%= render(UI::Textarea.new(label: "Comment", autogrow: true, class: "max-h-60",
                              placeholder: "Type a few lines; the box grows with them, up to a limit.")) %>
</div>

States

Bio

Reason *

Summary

Notes

Fixed size

states.html.erb

<div class="flex flex-col gap-4 max-w-md">
  <%= render(UI::Textarea.new(label: "Bio", value: "Rails developer who likes accessible UI.")) %>
  <%= render(UI::Textarea.new(label: "Reason", required: true, placeholder: "Required")) %>
  <%= render(UI::Textarea.new(label: "Summary", error: true, value: "Too short")) %>
  <%= render(UI::Textarea.new(label: "Notes", disabled: true, value: "Locked after review")) %>
  <%= render(UI::Textarea.new(label: "Fixed size", resize: :none, placeholder: "Can't be resized")) %>
</div>

All Sizes

sizes.html.erb

<div class="flex flex-col gap-3 max-w-md">
  <%= render(UI::Textarea.new(size: :sm, rows: 2, placeholder: "Small")) %>
  <%= render(UI::Textarea.new(rows: 2, placeholder: "Default")) %>
  <%= render(UI::Textarea.new(size: :lg, rows: 2, placeholder: "Large")) %>
</div>

API

Arguments

UI::Textarea.new(size: :default, rows: 3, resize: :vertical, autogrow: false, label: nil, label_size: :default, label_weight: :medium, hint: nil, required: false, error: nil, disabled: false, value: nil, form: nil, field: nil, class: nil, **html_attrs)

Notes

A multi-line text field, with the same label, hint, required, error and form-builder options as UI::Input. `autogrow: true` grows the box with its text (CSS field-sizing, no JavaScript); browsers without it keep `rows:` lines and scroll. Cap the height with a class such as `max-h-60`.