Textarea - HapplyUI

A textarea component with character counter, resize handle, error state, and simple mode.

Installation

bunx @happlyui/cli@latest add textarea

Dependencies

Registry dependencies

These are automatically installed when you add this component.

form-field-context
happly-ui-utils

Usage

import * as Textarea from "@/components/ui/textarea"

<Textarea.Root placeholder="Jot down your thoughts...">
  <Textarea.CharCounter current={78} max={200} />
</Textarea.Root>

Examples

Demo

Textarea with character counter.

78/200

<Textarea.Root placeholder="Jot down your thoughts...">
  <Textarea.CharCounter current={78} max={200} />
</Textarea.Root>

Interactive Counter

Textarea with live character counter tracking input length.

0/200

<Textarea.Root value={value} onChange={(e) => setValue(e.target.value)}>
  <Textarea.CharCounter current={value.length} max={200} />
</Textarea.Root>

Has Error

Textarea in error state with red ring and error focus shadow.

78/200

<Textarea.Root hasError>
  <Textarea.CharCounter current={78} max={200} />
</Textarea.Root>

With Label and Hint

Textarea composed with Label and Hint components.

Enter Your Message*(Optional)

78/200

This is a hint text to help user.

<FormField.Root
  label="Enter Your Message"
  htmlFor="message"
  required
  labelSub="Optional"
  labelSubParens
  hint="This is a hint text to help user."
>
  <Textarea.Root id="message" placeholder="Jot down your thoughts...">
    <Textarea.CharCounter current={78} max={200} />
  </Textarea.Root>
</FormField.Root>

Disabled

Disabled textarea with muted styling.

78/200

<Textarea.Root placeholder="..." disabled>
  <Textarea.CharCounter current={78} max={200} />
</Textarea.Root>

Simple

Simple textarea without container wrapper or resize handle.

<Textarea.Root placeholder="..." simple />

Simple Resize

Simple textarea with CSS resize enabled.

<Textarea.Root placeholder="..." simple className="resize-y" />

API Reference

Textarea.Root

The textarea component with optional container wrapper.

Prop	Type	Default	Description
`simple`	`boolean`	`false`	Render as a plain textarea without the container wrapper and resize handle
`hasError`	`boolean`	`false`	Show error styling with red ring
`containerClassName`	`string`	-	Additional classes for the container wrapper (non-simple mode only)

Textarea.CharCounter

Character counter displayed in the textarea footer.

Prop	Type	Default	Description
`current`	`number`	-	Current character count
`max`	`number`	-	Maximum character count. Turns red when exceeded.