A textarea that grows smoothly with its content up to a row limit, with a ring counter that turns amber near the limit and red past it. Characters over the limit are tinted in place, and Cmd or Ctrl plus Enter sends.
Replying to @mayachen
npx shadcn@latest add https://hyperblur.dev/r/field-autosize-textarea.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/field-autosize-textarea.tsx.
import { FieldAutosizeTextarea } from "@/components/hyperblur/field-autosize-textarea"
<FieldAutosizeTextarea limit={500} onSubmit={(text) => postComment(text)} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Message" | Label above the field. Pass an empty string to hide it. |
| placeholder | string | "Write something worth reading…" | Placeholder of the textarea. |
| value | string | Controlled text. Pair with onChange. | |
| defaultValue | string | "" | Initial text when uncontrolled. |
| onChange | (value: string) => void | Called on every edit. | |
| onSubmit | (value: string) => void | Called by the send button or Cmd/Ctrl + Enter when the text fits the limit. | |
| limit | number | 280 | Character limit that drives the ring and the overflow tint. |
| minRows | number | 2 | Height in rows when empty. |
| maxRows | number | 8 | Rows before the textarea starts to scroll. |
| submitLabel | string | "Post" | Text of the send button. |
| accent | string | "#2f7bff" | Focus ring, caret and ring color. |
| disabled | boolean | false | Disables typing and sending. |