Automatically Resize Input While Typing | Tutorial + Cloneable

Happy Wednesday! I needed a way to resize regular form inputs, so ChatGPT and I teamed up to create this!

By default, inputs have a fixed width and do not expand with content. I’m sure there’s a reason why, but I don’t know it. This project uses a “hidden-measure” element to calculate the ideal width of the input and updates it as you type.

Basically, it pulls the content of the input into a div with the same padding and font sizing. Gets the width of the div, and applies that to the input. Pretty clever, ChatGPT. It uses data attributes meaning you can easy apply the variable width code to multiple inputs on the same page.

You’ll find a tutorial video, code, and attributes if you follow the links above. If you have any questions feel free to drop me a note below :point_down: Have a good one!