PhiaUi.Components.TextareaCounter (phia_ui v0.1.17)

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}
/>

Summary

Functions

phia_textarea_counter(assigns)

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

textarea_counter(assigns)

Renders a textarea with an inline character counter.

Functions

phia_textarea_counter(assigns)

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(assigns)

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