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://get-neonkit.vercel.app/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.

Grows with each line up to 8, then scrolls.

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

Bio

117 / 120

Shown on your public profile.

Release notes

Major releases need release notes before they can ship.

Commit message

Generated from the merge commit.

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.	`—`
`description`	`ReactNode` Helper text under the field.	`—`
`error`	`ReactNode` Red invalid state and message. Replaces description. Pass true for the state without a message.	`—`
`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.	`—`
`containerClassName`	`string` Classes for the outer block with the label and 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.