AutoGrow Textareas with CSS

Because the calls for of the online change and builders experiment with totally different consumer experiences, the necessity for extra native language enhancements expands. Our presentation layer, CSS, has carried out extremely properly in bettering capabilities, even when typically too sluggish. The necessity for native help for mechanically increasing textarea components has been lengthy identified…and it is lastly right here!

To permit textarea components to develop vertically and horizontally, add the field-sizing property with a worth of content material:

textarea {
  field-sizing: content material; // default is `fastened`
}

The default worth for field-sizing is fastened, signaling present habits. The brand new habits, content material, will broaden as a lot as potential. To constrain the dimensions a textarea can develop, use conventional width/max-width and top/max-height properties.