# `PhiaUi.Components.TextareaEnhanced`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/textarea_enhanced.ex#L1)

Enhanced textarea components for PhiaUI.

13 components extending the base `phia_textarea/1` with auto-growth,
chat-style entry, code editing, action bars, side-by-side preview,
ghost style, and expandable behaviour.

## Component Overview

| Standalone              | Form-integrated                 | Key Feature             |
|-------------------------|---------------------------------|-------------------------|
| `autoresize_textarea`   | `phia_autoresize_textarea`      | Auto-grows with content |
| `chat_textarea`         | —                               | Enter-to-submit         |
| `code_textarea`         | `phia_code_textarea`            | Monospace + Tab indent  |
| `textarea_with_actions` | `phia_textarea_with_actions`    | Bottom action bar slot  |
| `split_textarea`        | `phia_split_textarea`           | Live preview panel      |
| `ghost_textarea`        | `phia_ghost_textarea`           | Borderless / transparent|
| `expandable_textarea`   | `phia_expandable_textarea`      | Collapsed + expand btn  |

## Hooks required

- `PhiaAutoresize` — autoresize_textarea, phia_autoresize_textarea
- `PhiaChatTextarea` — chat_textarea
- `PhiaCodeTextarea` — code_textarea, phia_code_textarea

# `autoresize_textarea`

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"]`.

# `chat_textarea`

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.).

# `code_textarea`

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"]`.

# `expandable_textarea`

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"]`.

# `ghost_textarea`

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"]`.

# `phia_autoresize_textarea`

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`.

# `phia_code_textarea`

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`.

# `phia_expandable_textarea`

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`.

# `phia_ghost_textarea`

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`.

# `phia_split_textarea`

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)

# `phia_textarea_with_actions`

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`

# `split_textarea`

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_actions`

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.).

---

*Consult [api-reference.md](api-reference.md) for complete listing*