Auto-growing textarea that expands with content.

Feature-detects field-sizing: content (Chrome 123+) for native resize. Falls back to JS scrollHeight via the PhiaAutoresize hook.

Example

<.autoresize_textarea
  name="message"
  value={@message}
  placeholder="Type your message..."
  phx-change="update_message"
/>

Attributes

• id (:string) - HTML id. Auto-generated if nil. Defaults to nil.
• name (:string) - HTML name attribute. Defaults to nil.
• value (:string) - Textarea content. Defaults to "".
• placeholder (:string) - Defaults to nil.
• min_rows (:integer) - Minimum rows before auto-grow kicks in. Defaults to 2.
• max_rows (:integer) - Maximum rows allowed (caps auto-grow). Defaults to 12.
• disabled (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-debounce", "phx-keydown", "required", "readonly", "autofocus"].

A chat-style textarea with Enter-to-submit and Shift+Enter for newlines.

Fires push_event(@on_submit, %{"value" => textarea_value}) on Enter, then clears and resets the textarea height. Shift+Enter inserts a newline.

Requires the PhiaChatTextarea JS hook.

Example

<.chat_textarea
  id="chat-input"
  name="message"
  on_submit="send_message"
  placeholder="Message #general"
>
  <:actions>
    <button type="button" phx-click="attach_file">
      <.icon name="paperclip" />
    </button>
  </:actions>
</.chat_textarea>

Attributes

• id (:string) (required) - Unique ID (required for phx-hook).
• name (:string) - Defaults to nil.
• value (:string) - Defaults to "".
• placeholder (:string) - Defaults to "Type a message… (Enter to send, Shift+Enter for newline)".
• on_submit (:string) - push_event name fired on Enter key. Defaults to "chat_submit".
• min_rows (:integer) - Defaults to 1.
• max_rows (:integer) - Defaults to 6.
• disabled (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-debounce"].

Slots

• actions - Right-side action buttons (send button, file attach, emoji, etc.).

A monospace code textarea with Tab-indentation and optional line numbers.

• Tab key inserts tab_size spaces instead of moving focus.
• Enter key carries forward the leading whitespace of the current line.
• Line numbers are rendered as an absolutely-positioned <ol> that scrolls in sync with the textarea.

Requires the PhiaCodeTextarea JS hook.

Example

<.code_textarea
  name="snippet"
  value={@snippet}
  tab_size={4}
  show_line_numbers={true}
  rows={15}
/>

Attributes

• id (:string) - HTML id. Auto-generated if nil. Defaults to nil.
• name (:string) - Defaults to nil.
• value (:string) - Defaults to "".
• placeholder (:string) - Defaults to nil.
• tab_size (:integer) - Number of spaces inserted on Tab key. Defaults to 2.
• show_line_numbers (:boolean) - Show line numbers overlay. Defaults to true.
• rows (:integer) - Defaults to 10.
• disabled (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-debounce", "required", "readonly", "autofocus"].

Textarea that starts collapsed and expands via a client-side button.

Uses JS.toggle_attribute to swap the rows attribute — no server round-trip or hook needed.

Example

<.expandable_textarea
  name="description"
  value={@description}
  collapsed_rows={2}
  expanded_rows={8}
/>

Attributes

• id (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• value (:string) - Defaults to "".
• placeholder (:string) - Defaults to nil.
• collapsed_rows (:integer) - Row count when collapsed. Defaults to 2.
• expanded_rows (:integer) - Row count when expanded. Defaults to 8.
• expand_label (:string) - Defaults to "Expand".
• collapse_label (:string) - Defaults to "Collapse".
• disabled (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-debounce", "required", "readonly", "autofocus"].

A borderless, transparent textarea for inline editing contexts.

No border, no background, no focus ring — blends into any surface. Ideal for in-place text editing in cards, lists, or comment flows.

Example

<.ghost_textarea name="note" value={@note} placeholder="Add a note..." />

Attributes

• id (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• value (:string) - Defaults to "".
• placeholder (:string) - Defaults to nil.
• rows (:integer) - Defaults to 3.
• disabled (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-debounce", "required", "readonly", "autofocus"].

Form-integrated auto-resizing textarea.

Wraps autoresize_textarea in form_field/1 with label, description, and changeset error display.

Example

<.phia_autoresize_textarea
  field={@form[:message]}
  label="Message"
  min_rows={3}
  max_rows={10}
/>

Attributes

• field (Phoenix.HTML.FormField) (required)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• placeholder (:string) - Defaults to nil.
• min_rows (:integer) - Defaults to 2.
• max_rows (:integer) - Defaults to 12.
• class (:string) - Defaults to nil.

Form-integrated code textarea.

Wraps code_textarea in form_field/1 for changeset integration.

Example

<.phia_code_textarea
  field={@form[:code]}
  label="SQL Query"
  tab_size={4}
  rows={12}
/>

Attributes

• field (Phoenix.HTML.FormField) (required)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• tab_size (:integer) - Defaults to 2.
• show_line_numbers (:boolean) - Defaults to true.
• rows (:integer) - Defaults to 10.
• class (:string) - Defaults to nil.

Form-integrated expandable textarea.

Example

<.phia_expandable_textarea
  field={@form[:description]}
  label="Description"
  collapsed_rows={2}
  expanded_rows={8}
/>

Attributes

• field (Phoenix.HTML.FormField) (required)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• placeholder (:string) - Defaults to nil.
• collapsed_rows (:integer) - Defaults to 2.
• expanded_rows (:integer) - Defaults to 8.
• expand_label (:string) - Defaults to "Expand".
• collapse_label (:string) - Defaults to "Collapse".
• class (:string) - Defaults to nil.

Form-integrated ghost (borderless) textarea.

Example

<.phia_ghost_textarea field={@form[:note]} label="Internal note" />

Attributes

• field (Phoenix.HTML.FormField) (required)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• placeholder (:string) - Defaults to nil.
• rows (:integer) - Defaults to 3.
• class (:string) - Defaults to nil.

Form-integrated split textarea with live preview.

Example

<.phia_split_textarea field={@form[:content]} label="Content">
  <:preview>
    <div class="prose">{Phoenix.HTML.raw(@preview)}</div>
  </:preview>
</.phia_split_textarea>

Attributes

• field (Phoenix.HTML.FormField) (required)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• placeholder (:string) - Defaults to "Write Markdown here...".
• rows (:integer) - Defaults to 10.
• class (:string) - Defaults to nil.

Slots

• preview (required)

Form-integrated textarea with bottom action bar.

Example

<.phia_textarea_with_actions field={@form[:body]} label="Post body">
  <:actions>
    <button type="submit">Publish</button>
  </:actions>
</.phia_textarea_with_actions>

Attributes

• field (Phoenix.HTML.FormField) (required)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• placeholder (:string) - Defaults to nil.
• rows (:integer) - Defaults to 4.
• class (:string) - Defaults to nil.

Slots

• actions

Side-by-side editor with a live preview panel.

The left column is the raw textarea; the right column is the :preview slot. Update the preview by handling phx-change in your LiveView and re-rendering the preview slot with processed content.

Example

<.split_textarea
  name="markdown"
  value={@markdown}
  phx-change="update_markdown"
>
  <:preview>
    <div class="prose">{Phoenix.HTML.raw(@preview_html)}</div>
  </:preview>
</.split_textarea>

Attributes

• id (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• value (:string) - Defaults to "".
• placeholder (:string) - Defaults to "Write Markdown here...".
• rows (:integer) - Defaults to 10.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-debounce"].

Slots

• preview (required) - Preview panel content (rendered HTML, live preview, etc.).

Textarea with a bottom action bar for buttons, character counts, or quick actions.

The action bar is separated from the textarea by a subtle border-t.

Example

<.textarea_with_actions name="post" value={@post} placeholder="Write a post...">
  <:actions>
    <button type="button" phx-click="add_emoji">Emoji</button>
    <button type="submit" class="ml-auto">Post</button>
  </:actions>
</.textarea_with_actions>

Attributes

• id (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• value (:string) - Defaults to "".
• placeholder (:string) - Defaults to nil.
• rows (:integer) - Defaults to 4.
• disabled (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-debounce", "required", "readonly", "autofocus"].

Slots

• actions - Content rendered in the bottom action bar (buttons, counters, etc.).