Auto-Resizing Form Fields: A Pure CSS Solution

Overcoming the Limitations of Fixed-Size Form Fields

Form fields like <input>, <textarea>, and <select> are essential for collecting user input. However, they often come with a common drawback: fixed sizes with variable content.

When a form field’s content exceeds its fixed size, the overflow can make it difficult for users to interact with the field.

Example <textarea> with overflowing content.

Conversely, when the content is significantly smaller than the fixed size, the field may make the interface feel unbalanced.

Example <textarea> with a large intrinsic size.

Setting a form field’s size often requires finding a middle ground to avoid it being too small or too large. When dealing with a <select> field with a static list of options, this solution can work fairly well. For <input> and <textarea> fields where the content is more dynamic, this solution can fall apart fairly quickly.

Some elements, like <textarea>, offer the ability to manually resize by dragging a handle in the corner of the form field. To enable this you can set the CSS resize property to vertical, horizontal, or both. In fact, most browsers default this property to both. However, this feature doesn’t work on most mobile browsers.

Example <textarea> with resize: vertical.

This gives users some control, but it’s not a perfect solution. Wouldn’t it be great if all form fields could adjust automatically based on their content?

JavaScript to the Rescue

To tackle these issues, developers have often turned to JavaScript solutions that dynamically adjust form field sizes based on content. For React developers, packages like React Textarea Autosize (opens in a new tab) have been a popular choice. This package provides a drop-in replacement for the <textarea> element that automatically resizes as the user types. At the time of writing this post, this package has more than 11 million downloads per month.

While effective, this approach adds complexity to your codebase. Wouldn’t it be great if there was a pure CSS solution?

Enter the CSS `field-sizing` Property

CSS now offers a pure solution to auto-resize form fields. The new CSS field-sizing property allows form fields to adjust their size dynamically based on their content, eliminating the need for JavaScript.

input,
select,
textarea {
  field-sizing: content;
}

Example <textarea> with field-sizing: content.

By setting field-sizing: content, form fields automatically resize to fit their content. This property works with several form elements, including <input>, <textarea>, and <select>.

References

Change log

Oct 13, 2026Updated: field-sizing is now Baseline 2026 Historyof this post on GitHub
Oct 15, 2024Published. Historyof this post on GitHub

See something wrong or out of date? Open an issue →