This component allows you to configure most anything for the humble HMTL <input>. To have to fiddle and jiddle with all of these controls for every input in your design would be a waste of time that could be spent on life’s better pursuits (like anything else, at all).
Instead, use this component as the base to create the custom input components your design, or system, call for (e.g. a “Standard Input”, “Featured Input”, “Ted’s Input”).
Then when Ted gets canned and you need to switch everything over to “Susan’s Input”, just go back to the design component you created and do a bit quick fiddling and jiddling with all the crazy controls afforded here to make Susan happy (of course, let everyone know it was a huge effort and use the extra time for those better pursuits we chatted about earlier).
Sometimes when you update the component’s options you won’t see the changes shown on the canvas; this seems to be a bug in Framer. To fix, simply toggle the visibility of the component off and back on.
|Input type||text, password, textarea|
|Font||family, size, weight|
|Input - Value||content, color|
|Input - Placeholder||content, color|
|Textarea||line-height, natural number of rows and cols|
|Width||natural, 100% of parent|
|Height||natural, 100% of parent|
|Padding||natural (font-size), explicit (px), common, unique|
|Border||width, radius; default, hover, and focus colors|
|Background||yes/no; default, hover, and focus colors|
There a few other components I’ve built for a similar purpose, and in the same fashion –
This component wouldn’t be a thing without Benjamin den Boer’s fantastic ‘Input’ Component, which it’s built upon – https://store.framer.com/package/benjamin/input.