# 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>
```