Automatic Textarea Resizing in 1KB – GrowField.js

GrowField is a tiny (1.75kb minified), dependency-free JavaScript library for making <textarea> elements automatically adjust their height to fit their content.

The library handles both growing and shrinking as the user types or content changes. You can set minimum and maximum row limits to keep things constrained.

It’s useful anywhere you need a textarea to adapt to user input, like comment forms, note-taking fields, or configuration editors.

More Features:

• Simple API: Easy initialization with a CSS selector or DOM element.
• Input event-driven: Responds immediately to content changes.
• Precise measurements: Accounts for padding, borders, and line height

See it in action:

How to use it:

1. Install & import.

npm install growfield --save

// ES6
import growfield from 'growfield'

// CommonJS
const growfield = require('growfield')

2. Or download the package and load the ‘growfield.min.js’ script in your HTML:

<script src="dist/growfield.min.js"></script>

3. Initialize GrowField after the DOM is fully loaded and target the textareas you want to auto-resize using a CSS selector.

<textarea id="example"></textarea>

window.addEventListener('load', function () {
  growfield('#example')
})

4. Specify the max & min rows of the textarea.

window.addEventListener('load', function () {
  growfield('#example', {
    maxRows: 10,
    minRows: 1,
  })
})

Comparison with Alternatives

• CSS field-sizing: content: This is the modern CSS approach. It directly tells the browser to size the element based on its content. Support is currently limited (Chrome 119+, Firefox behind a flag), but it’s the future. Once widely supported, it might make libraries like GrowField less necessary for basic use cases. However, GrowField works now across older browsers and offers explicit min/maxRows control which CSS alone doesn’t provide as easily.
• Manual JS Calculation: You could roll your own height calculation using scrollHeight. However, getting it right reliably, especially considering line-height, padding, border, and box-sizing, is tricky. GrowField encapsulates this logic cleanly. I’ve tried doing this manually before; it often leads to subtle bugs or edge cases

FAQs

Q: How does GrowField handle textareas that already have content when the page loads?

A: The initialization script (growfield(...)) automatically triggers an input event on each targeted textarea after setting it up. This forces an immediate calculation and resize based on the initial content. Wrapping the initialization in window.addEventListener('load', ...) ensures the styles and content are ready.

Q: What if I dynamically add textareas to the page after initial load?

A: GrowField won’t automatically detect them. You need to call growfield() again, passing the new textarea element or a selector that targets it. For instance, after adding an element with id="new-textarea", you’d call growfield('#new-textarea').

Q: Are there any known conflicts with CSS frameworks like Bootstrap or Tailwind?

A: Generally, no major conflicts. GrowField temporarily overrides box-sizing, padding, border, and overflow during its height calculation but restores them immediately. However, if your framework applies heavy styling with !important on height-related properties, it could theoretically interfere, though it’s unlikely for standard textarea styling. The resize: none; style applied by GrowField might override custom resize handles if you intended to have them.

Q: Is there a performance impact if I have many auto-resizing textareas on one page?

A: The onInput calculation itself is fast – mostly reading styles and basic arithmetic. The main cost is the event listener attached to each textarea. For a reasonable number (dozens), the impact is negligible. If you had hundreds or thousands actively resizing, you might see some overhead, but that’s an edge case. The initial setup iterates through all matched elements once.

Q: Can I programmatically trigger a resize?

A: Yes. Just dispatch an input event on the textarea element yourself after changing its value programmatically.

The post Automatic Textarea Resizing in 1KB – GrowField.js appeared first on CSS Script.