Textarea

New

Overview

Textarea component for multi-line text fields.

It renders a native textarea element.

Message

HEEx

<.form for={@form}>
  <Textarea.textarea
    field={@form[:message]}
    label="Message"
    placeholder="Describe what happened..."
  />
</.form>

Description and sublabel

Use description for supporting text beneath the field and sublabel for short text beside the label.

Release notes (optional)

Summarize the changes that affect people using the product.

HEEx

<.form for={@form}>
  <Textarea.textarea
    field={@form[:release_notes]}
    label="Release notes"
    sublabel="(optional)"
    description="Summarize the changes that affect people using the product."
    placeholder="Describe what changed..."
  />
</.form>

Disabled

Set disabled when the value cannot be edited or submitted.

Notes

HEEx

<Textarea.textarea
  id="locked-notes"
  name="locked_notes"
  label="Notes"
  value="This field cannot be edited."
  disabled
/>

Required

Set required to apply native validation and show the default (required) sublabel. An explicit sublabel takes precedence.

Summary (required)

HEEx

<Textarea.textarea
  id="required-summary"
  name="summary"
  label="Summary"
  placeholder="Write one or two sentences..."
  required
/>

Rows

Set rows to control the field's initial visible line count.

Biography

HEEx

<Textarea.textarea
  id="biography"
  name="biography"
  label="Biography"
  rows={8}
  placeholder="Tell us about yourself..."
/>

Auto-grow

Set autogrow to apply field-sizing: content . The field grows and shrinks with its content without a JavaScript hook.

Message

HEEx

<Textarea.textarea
  id="growing-message"
  name="growing_message"
  label="Message"
  rows={2}
  autogrow
  placeholder="Type to expand the field..."
/>

Errors

When bound with field, validation errors render beneath the textarea .

HEEx

<.form for={@form}>
  <Textarea.textarea
    field={@form[:message]}
    label="Message"
    placeholder="Describe what happened..."
  />
</.form>

Add this module

terminal

mix dizzy.add textarea

Component API

Textarea.textarea

Attributes

Attributes for Textarea.textarea
Name	Type	Default	Values
`autogrow`	`:boolean`	false	—
`class`	`:any`	nil	—
`description`	`:string`	nil	—
`disabled`	`:boolean`	false	—
`errors`	`:list`	[]	—
`field`	`{:struct, Phoenix.HTML.FormField}`	nil	—
`id`	`:string`	nil	—
`label`	`:string`	nil	—
`name`	`:string`	nil	—
`required`	`:boolean`	false	—
`rest`	`:global`	nil	—
`rows`	`:integer`	4	—
`sublabel`	`:string`	nil	—
`value`	`:any`	nil	—