Menu
Auto-Resizing Form Fields: A Pure CSS Solution

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.

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

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.

Information

The browser you are currently using doesn’t support the CSS resize property. As a result, the below example will not be resizable. See https://caniuse.com/css-resize for more details.

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 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

Warning

As of now, the field-sizing property is relatively new and not widely supported. Until support is more widespread, I would recommend leveraging a @supports rule with fallback styles, effectively making it a progressive enhancement. See https://caniuse.com/?search=field-sizing for more details.

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;
}
Information

You are using a browser that doesn’t support the CSS field-sizing property. As a result, the below example will fallback to the defaults and won’t automatically resize as its content changes.

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>.

Information

To maintain usability and prevent layout issues, I recommend setting minimum and maximum size constraints on your form fields. You can achieve this using the CSS min-inline-size, min-block-size, max-inline-size, and max-block-size properties. These properties control the minimum and maximum width and height of form fields, similar to min-width, min-height, max-width, and max-height, but they adapt to different writing modes.

Alternatively, you can use placeholders, which also impact the intrinsic size of the fields. The length of the placeholder text determines the initial size of the field when using field-sizing: content.

References