autoGrowTextarea

A textarea that is as tall as what is written in it — no half-empty box, no inner scrollbar until it has to be one.

This engine sizes the field itself. It has field-sizing: content, so every field below follows its value with no script involved. Switch scripting off and nothing changes.

This engine does not grow the field. It has no field-sizing: content, so the fields below stay at their rows height, with a scrollbar and a resize handle — the component's deliberate fallback.

The default: three lines, growing to twelve

Type into it. The field starts at three lines — the same three its rows attribute states, so the first paint is already right — and follows the value line by line up to twelve. The count is in lh, the height of one line box of this field, so it follows the page's typography instead of a number somebody guessed.

Your message

Three lines to start with, twelve at most.

A value that is already there

The same field, rendered with a value in it — a draft loaded from a CMS, a form coming back from a failed validation. It is the right height on arrival: the engine lays it out at its value's height in the first paint, before any script has run.

Saved draft

A tighter cap: one line, at most five

--autoGrowTextarea-min-rows: 1 and --autoGrowTextarea-max-rows: 5, set on this one instance. It starts as a single line and stops growing at five — and then scrolls, because the cap is a maximum and not a lid: keep typing and every line stays reachable. A field that grew without limit would push the button below it off the screen instead.

Add a comment

No cap, and a column that changes width

--autoGrowTextarea-max-size: none takes the cap off entirely. Drag the dashed box narrower by its bottom-right corner: the value rewraps into more lines and the field gets taller, because how tall a text is was never a property of the text. The engine re-lays the field out like any other box; nothing has to observe the width.

Notes

Inside a form: resetting the value

A form reset puts the authored value back without firing an input event — the value change a script listening for input never hears. The engine does not need to hear it: the size follows the value, however the value changed. Type something, then press Reset: the field returns to the draft above and to that draft's height.

Together with a module

The class next to data-js-behavior="inputCharCount" on the same field. The counter counts down from the native maxlength, the box follows the value, and neither knows about the other: the component does not care what else the field carries.

Summary