05 · Forms

Forms

Textarea that grows and shrinks on its own

Chrome 123+

← Index

With field-sizing: content

CSS: textarea { field-sizing: content; min-block-size: 96px }

Input too

Chrome 123+ · In other browsers it stays fixed-size, without breaking anything.

css

textarea, input {
  field-sizing: content;   /* crece y se achica según el contenido */
  min-block-size: 96px;    /* alto mínimo inicial */
}

/* antes necesitabas JS: */
/* el.scrollHeight + el.style.height = el.scrollHeight */

An honest note on support

Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".