Textarea

Multi-line field that grows with its content and counts characters.

Feedback

0 / 280

Goes straight to the team. We read every one.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/textarea.json

import { Textarea } from "@/components/ui/textarea"

<Textarea label="Feedback" maxLength={280} showCount />

The field grows with its content between minRows and maxRows, then scrolls.

With maxLength, the count turns amber in the last 10% and red at the limit.

Also accepts every native textarea attribute, and the ref points at the <textarea>. className and style go to the field box around it.

Prop	Type	Default
`label`	`ReactNode` Visible label, linked to the textarea.	None
`description`	`ReactNode` Helper text under the field.	None
`error`	`ReactNode` Red invalid state and message. Replaces description. Pass true for the state without a message.	None
`autoResize`	`boolean` Grow with the content. When off, rows applies and the field resizes by hand.	`true`
`minRows`	`number` Starting height in lines.	`3`
`maxRows`	`number` Height in lines before the field scrolls.	`10`
`showCount`	`boolean` Character count in the corner, as count / maxLength when maxLength is set.	`false`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited
`size`	`"sm" \| "md" \| "lg"` Padding, text size and line height.	`"md"`
`className`	`string` Classes for the field box: border, background, radius.	None
`containerClassName`	`string` Classes for the outer block with the label and message.	None

required shows the neon dot after the label. A form reset re-counts and re-sizes the field.
When the browser rejects the field on submit (required, type, pattern), it turns red until it's edited or the form resets. The browser shows its own message.
The count is linked with aria-describedby, so screen readers read it when the field gets focus.
maxLength is the native attribute, so typing and pasting stop at the limit.
Auto-resize re-measures when the value changes and when the field's width changes.