Textarea
$ npx shadcn@latest add https://lacodda.github.io/dowel/r/textarea.jsonautoResize is the reason this is not just a taller Input. A fixed box
makes someone scroll inside a scroll; a box that grows without limit pushes the
button they are reaching for off the screen. maxRows is where it stops
growing and starts scrolling after all.
<Textarea autoResize maxRows={10} />Height is reset before measuring. Worth knowing if you write your own: a
box already tall enough reports its own height as scrollHeight, so without
the reset it grows and never shrinks back.
Props
Read from the types in ui/textarea.tsx, the file a product copies - so the description of each prop is also what an editor shows over it there.
| Prop | Type | Default | |
|---|---|---|---|
ref | Ref<HTMLTextAreaElement> | A ref to the underlying <textarea> element, as a function or an object. | |
autoResize | boolean | false | Grow to fit the content instead of scrolling. |
maxRows | number | Stop growing here, in lines, and scroll instead. |
And every prop of React's TextareaHTMLAttributes<HTMLTextAreaElement>, passed on.
Accessibility
The examples on the stand, through axe 4.14.0 in a browser, in both themes, against WCAG 2.2 A and AA and axe's best practices: 7 rules applied and passed, and none failed. The accessibility report has every item.
History
Each release that changed ui/textarea.tsx - the file a product copies - newest first.