Renders a textarea input for capturing multi-line text.

This component provides a flexible way to build form inputs with support for labels, help text, and error handling. It includes built-in form integration and accessibility features.

Attributes

• id (:string) - The unique identifier for the textarea. When not provided, a random ID will be generated. Defaults to nil.

• field (Phoenix.HTML.FormField) - The form field to bind to. When provided, the component automatically handles value tracking, errors, and form submission.

• class (:any) - Additional CSS classes to apply to the textarea. Useful for controlling the appearance and layout of the input.

  Defaults to nil.

• help_text (:string) - Optional help text displayed below the textarea. Use this to provide additional context or instructions to users.

  Defaults to nil.

• label (:string) - The primary label for the textarea. This text is displayed above the input and is used for accessibility purposes.

  Defaults to nil.

• sublabel (:string) - Additional context displayed to the side of the main label. Useful for providing extra information without cluttering the main label.

  Defaults to nil.

• description (:string) - Detailed description of the textarea field. This text appears below the label and can contain longer explanatory text.

  Defaults to nil.

• value (:string) - The current value of the textarea. When using forms, this is automatically handled by the field attribute.

• errors (:list) - List of error messages to display below the textarea. These are automatically handled when using the field attribute with form validation.

  Defaults to [].

• name (:string) - The form name for the textarea. Required when not using the field attribute.

• rows (:integer) - The number of visible text lines. Defaults to 3.

• disabled (:boolean) - When true, the textarea becomes non-interactive and appears visually muted. Defaults to false.

• size (:string) - Controls the size of the textarea:

  • "sm": Compact size for space-constrained UIs
  • "base": Default size suitable for most use cases
  • "lg": Larger size for increased visibility
  • "xl": Extra large size for maximum emphasis

  Defaults to "base".

• Global attributes are accepted. Additional HTML attributes to apply to the textarea element. Supports all globals plus: ["autocomplete", "cols", "dirname", "disabled", "form", "maxlength", "minlength", "name", "placeholder", "readonly", "required", "rows", "wrap", "spellcheck"].

Size Variants

The component offers four size variants to match different UI requirements:

<.textarea
  name="description"
  label="Small"
  size="sm"
  placeholder="A compact textarea"
/>

<.textarea
  name="description"
  label="Base (Default)"
  placeholder="Standard size textarea"
/>

<.textarea
  name="description"
  label="Large"
  size="lg"
  placeholder="Larger textarea for more emphasis"
/>

<.textarea
  name="description"
  label="Extra Large"
  size="xl"
  placeholder="Maximum emphasis textarea"
/>

Form Integration

The component seamlessly integrates with Phoenix forms, handling field bindings, validation errors, and form submission:

<.form :let={f} for={@form} phx-change="validate" phx-submit="save">
  <.textarea
    field={f[:description]}
    label="Description"
    help_text="Provide a detailed description of your project"
  />
</.form>

Error Handling

When used with forms, the component automatically displays validation errors. You can also manually provide errors:

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

Examples

Basic usage with a label and help text:

<.textarea
  name="bio"
  label="Biography"
  help_text="Tell us about yourself"
  rows={5}
/>

Rich form with additional context:

<.form :let={f} for={@form} phx-change="validate">
  <.textarea
    field={f[:description]}
    label="Project Description"
    sublabel="Optional"
    description="Provide details about your project's goals and scope"
    help_text="Be specific and concise"
    rows={6}
  />
</.form>

Custom styling with additional classes:

<.textarea
  name="notes"
  label="Meeting Notes"
  size="lg"
  class="font-mono"
  rows={10}
/>