Provides <.textarea>, a labeled multi-line text input bound to either a Phoenix form field or a plain name/value pair.

The component renders a <textarea> element together with optional label, sublabel, description, helper text, and error messages. It supports a fixed-row layout (the default) and a content-aware autogrow mode that resizes the field as its value changes, starting at min_rows and growing without bound unless max_rows caps it.

Usage

Render a textarea by providing a name. A label is recommended so the field has a visible association for the user:

<.textarea name="comments" label="Comments" placeholder="Your thoughts..." />

Most fields combine a label with a placeholder, helper text, and an explicit row count:

<.textarea
  name="bio"
  label="Biography"
  description="A short paragraph that appears on your public profile."
  help_text="Markdown is supported."
  rows={5}
  placeholder="Tell us about yourself..."
/>

Sizes

The size attribute scales vertical/horizontal padding and font size. The default is "md":

<.textarea name="size_sm" size="sm" placeholder="Small" />
<.textarea name="size_md" size="md" placeholder="Medium (Default)" />
<.textarea name="size_lg" size="lg" placeholder="Large" />
<.textarea name="size_xl" size="xl" placeholder="Extra Large" />

Labels, Description, and Helper Text

The label area can carry up to three distinct strings:

• label: the primary label rendered above the field.
• sublabel: short inline text rendered next to the label, typically a state hint such as "(required)" or "(optional)".
• description: longer guidance rendered between the label and the field.

Helper text rendered below the field uses the help_text attribute:

<.textarea
  name="release_notes"
  label="Release notes"
  sublabel="(required)"
  description="Summarize what changed in this release for end users."
  help_text="Aim for 3-5 short bullet points."
  rows={6}
/>

Form Integration

The component supports two binding modes: a Phoenix.HTML.FormField struct via field (changeset-driven forms) or a plain name (standalone fields).

Bind to a form field

When field is set, the component derives id, name, value, and errors from the form field struct. Errors are translated and rendered automatically, but only after the field has been touched (Phoenix.Component.used_input?/1):

<.form :let={f} for={@form} phx-change="validate" phx-submit="save">
  <.textarea field={f[:description]} label="Description" rows={6} />
</.form>

Standalone textarea

When you don't have a changeset, pass name, optionally value, and any error list directly:

<.textarea name="note" placeholder="Add a note..." value={@note} />
<.textarea name="reason" errors={["Reason is required."]} />

States

Disabled

Disabled textareas cannot be focused or edited and render with reduced contrast. Disabling a parent <fieldset> cascades to descendant fields through HTML's native :disabled semantics:

<.textarea name="locked" value="Cannot change" disabled />

<fieldset disabled>
  <.textarea name="bio" value="..." />
</fieldset>

Errors

When the errors list is non-empty (or the bound form field has errors), the field renders in the danger color and each message is shown below the textarea:

<.textarea
  name="description"
  value="too short"
  errors={["Description must be at least 10 characters."]}
/>

When using field, errors are pulled from field.errors and translated through the configured Gettext backend.

Height and Resizing

By default, the field renders at a fixed rows height and the user can drag the native browser resize handle in the bottom-right corner to make it taller. Pass an explicit rows to set the initial height:

<.textarea name="comments" label="Comments" rows={6} />

Auto-growing height

Pass autogrow to make the field expand and shrink with its contents. By default the field grows without an upper bound; set max_rows to cap the height, after which content scrolls within the field. The native resize handle is disabled in this mode since the height is driven by content:

<.textarea
  name="message"
  label="Message"
  autogrow
  min_rows={2}
  max_rows={8}
  placeholder="Type your message..."
/>

Autogrow reacts to typing instantly on the client, with no LiveView round-trip or hook, and behaves consistently across every browser. The rows attribute is ignored when autogrow is enabled; min_rows sets the starting height so the field looks right before any value is entered. When max_rows is set, content beyond that height scrolls inside the field instead of expanding it further, with the scrollbar flush against the field's edge.

Constraining Field Width

By default, the field fills the width of its container. To narrow only the field while keeping the label, description, and helper text at their natural width, apply a width utility to any ancestor that targets [data-part=field-root]:

<div class="**:data-[part=field-root]:max-w-xs">
  <.textarea label="Notes" description="Brief notes only." name="notes" />
</div>

This pattern works uniformly across all Fluxon input-shaped form components.

Examples

Comment form bound to a changeset

<.form :let={f} for={@form} phx-change="validate" phx-submit="save">
  <.textarea
    field={f[:body]}
    label="Comment"
    placeholder="Share your thoughts..."
    rows={4}
    phx-debounce="blur"
  />
  <.button type="submit" color="primary">Post comment</.button>
</.form>

Chat composer that grows with the message

<.textarea
  name="message"
  label="Message"
  autogrow
  min_rows={1}
  max_rows={10}
  placeholder="Send a message..."
  phx-keydown="maybe_send"
  phx-key="Enter"
/>

Required field with sublabel and description

<.textarea
  field={@form[:summary]}
  label="Summary"
  sublabel="(required)"
  description="Used as the preview text wherever this post is linked."
  help_text="Keep it under 200 characters."
  rows={3}
  maxlength="200"
  required
/>

Constrained-width feedback widget

<div class="**:data-[part=field-root]:max-w-md">
  <.textarea
    name="feedback"
    label="How can we improve?"
    autogrow
    min_rows={3}
    max_rows={8}
  />
</div>