PineUiPhoenix.Components.Textarea (Pine UI v0.2.0)

Copy Markdown View Source

Multi-line text inputs.

Ports both Pines textarea (pure Tailwind) and Pines auto-resize textarea — the latter via auto_resize, which is the component's only use of Alpine.

<.textarea name="bio" label="Bio" rows={4} />
<.textarea name="note" auto_resize placeholder="Grows as you type…" />

Summary

Forms

textarea(assigns)

Renders a labelled textarea.

Forms

textarea(assigns)

Renders a labelled textarea.

Examples

<.textarea name="bio" label="About you" rows={5}
           hint="A short paragraph is plenty." />

<.textarea name="comment" auto_resize rows={1}
           placeholder="Write a comment…" phx-change="draft" />

Attributes

  • id (:string) - Defaults to nil.

  • name (:string) (required)

  • value (:string) - Defaults to nil.

  • label (:string) - Defaults to nil.

  • placeholder (:string) - Defaults to nil.

  • rows (:integer) - Defaults to 3.

  • hint (:string) - Defaults to nil.

  • error (:string) - Defaults to nil.

  • disabled (:boolean) - Defaults to false.

  • readonly (:boolean) - Defaults to false.

  • required (:boolean) - Defaults to false.

  • auto_resize (:boolean) - Grows the field to fit its content as the user types. Requires Alpine. The height is reset to 0 and then set to scrollHeight on every input, which is what lets it shrink again as well as grow.

    Defaults to false.

  • class (:string) - Defaults to nil.

  • container_class (:string) - Defaults to nil.

  • Global attributes are accepted. Supports all globals plus: ["autocomplete", "autofocus", "maxlength", "minlength", "wrap", "form"].