Better form UX with the CSS property `field-sizing`
One of the more painful experiences I've encountered on the web is filling out a form input that is fixed width. Whatever I've typed becomes cutoff and I can't actually see what I've typed or am typing.
On desktop, I usually click and drag to highlight the text to see the cutoff text. Mobile can be even more annoying, resulting in trying to copy and paste my text somewhere to ensure I've not misspelled anything or added an extra space.
field-sizing CSS property #
Some engineers on the Chrome team have proposed and are working on a CSS solution to this problem with the
The new property could be applied to the following elements:
field-sizing property values #
There are two values proposed for implementation.
field-sizing: fixed; will keep the current behavior and the form control box won't change in size. It would probably be suitable to retain the current behavior if you know that the text length of whatever is being input will be between certain character lengths that don't get cut off.
field-sizing: content; will disable the current behavior and allow the form size to adjust depending on the content.
One pain point to note with this is, if you're using
<input type="text">, you will want to put a min and max-width on the element...otherwise it looks like you could just expand forever horizontally, which in itself wouldn't be a great user experience.
Expanding vertically with
<textarea> though, does create a much better experience especially on smaller screens.
Code example #
This feature is in Developer Trial behind a flag (Experimental Web Platform features) - in Chrome & Microsoft Edge and is expected to be shipping in Chrome 123 (but Chrome Status hasn't been updated to reflect whether this is actually true or not.)
Open up Canary or Dev browser channels (I'm using Edge Canary), ensure your experimental flag is turned on, and check out the codepen below by adding content to the inputs. The first input won't expand, the second one will.
Resources & Availability #
I can't find signal from Safari or Firefox on this feature but it is available in Dev Trial in Chrome & Edge. No MDN docs page has been published yet but when it lands, I'll update here.