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

Textarea with a character counter and optional max-length enforcement.

Provides `textarea_counter/1` — a standalone `<textarea>` with a live
character count display — and `phia_textarea_counter/1` — the form-integrated
version with label, description, and changeset error messages.

The counter shows `current / max` when `max_length` is set, or just the
current count when it is not. The counter changes colour as the limit
approaches or is exceeded:

- Default: `text-muted-foreground`
- Warning (≥ 80% of max): `text-warning` (amber)
- Exceeded (> max): `text-destructive` (red)

## When to use

Use when users need character-limit guidance — post bodies, bio fields,
tweet-style inputs, SMS templates, support messages, or form fields with
explicit limits.

## Basic usage

    <.textarea_counter
      name="body"
      value={@body}
      max_length={280}
      placeholder="What's on your mind?"
      phx-change="update_body"
    />

## Form-integrated

    <.phia_textarea_counter
      field={@form[:bio]}
      label="Bio"
      description="Tell us a bit about yourself."
      max_length={160}
      rows={4}
    />

# `phia_textarea_counter`

Renders a form-integrated textarea with label, description, character counter,
and changeset error messages.

## Examples

    <.phia_textarea_counter field={@form[:bio]} label="Bio" max_length={160} />

    <.phia_textarea_counter
      field={@form[:message]}
      label="Message"
      description="Maximum 500 characters."
      max_length={500}
      rows={6}
    />

## Attributes

* `field` (`Phoenix.HTML.FormField`) (required) - A `Phoenix.HTML.FormField` struct from `@form[:field_name]`.
* `label` (`:string`) - Label text rendered above the textarea. Defaults to `nil`.
* `description` (`:string`) - Helper text rendered below the label. Defaults to `nil`.
* `max_length` (`:integer`) - Maximum allowed character count. Defaults to `nil`.
* `rows` (`:integer`) - Number of visible text rows. Defaults to `4`.
* `show_count` (`:boolean`) - Whether to show the character counter. Defaults to `true`.
* `class` (`:string`) - Additional CSS classes merged into the `<textarea>` element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to `textarea_counter/1`. Supports all globals plus: `["phx-change", "phx-debounce", "placeholder", "disabled", "required", "readonly"]`.

# `textarea_counter`

Renders a textarea with an inline character counter.

The counter's colour changes as the limit is reached:
- Normal: muted foreground
- Warning (≥ 80%): amber
- Exceeded (> 100%): destructive red

## Examples

    <.textarea_counter name="tweet" value={@tweet} max_length={280} />

    <.textarea_counter name="bio" value={@bio} max_length={160} rows={3} />

## Attributes

* `id` (`:string`) - HTML id for the `<textarea>`. Auto-generated if nil. Defaults to `nil`.
* `name` (`:string`) - HTML name attribute. Defaults to `nil`.
* `value` (`:string`) - Current textarea content. Used to compute the live character count. Defaults to `""`.
* `max_length` (`:integer`) - Maximum allowed character count. When set, enforces `maxlength` on the native element. Defaults to `nil`.
* `rows` (`:integer`) - Number of visible text rows. Defaults to `4`.
* `placeholder` (`:string`) - Placeholder text. Defaults to `nil`.
* `show_count` (`:boolean`) - Whether to show the character counter below the textarea. Defaults to `true`.
* `disabled` (`:boolean`) - Disables the textarea. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes merged into the `<textarea>` element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the `<textarea>` element. Supports all globals plus: `["phx-change", "phx-debounce", "phx-keydown", "required", "readonly", "autofocus"]`.

---

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