Textarea Documentation

Use textarea when you need a multi-line text field with the same visual language as the rest of PUI's form controls.

Import

use PUI
# or
import PUI.Input

Basic Usage

<.textarea
  id="bio"
  name="bio"
  label="Biography"
  placeholder="Tell us about yourself..."
  rows="4"
/>

Adjusting Height

Use the standard rows attribute to control the visible height.

<.textarea id="summary" name="summary" label="Summary" rows="3" />
<.textarea id="feedback" name="feedback" label="Feedback" rows="6" />

Form Integration

textarea supports Phoenix form fields via the field attribute:

<.form for={@form} phx-change="validate" phx-submit="save">
  <.textarea field={@form[:notes]} label="Notes" rows="5" />
  <.button type="submit">Save</.button>
</.form>

API Reference

Attributes

Name	Type	Default	Description
`id`	`any`	`nil`	Element ID
`label`	`string`	`nil`	Label text
`field`	`FormField`	`nil`	Phoenix form field
`class`	`string`	`""`	Additional CSS classes
`rows`	`string`	—	Number of visible text lines
`placeholder`	`string`	—	Placeholder text
`disabled`	`boolean`	`false`	Disable the textarea

Textarea