Exploring Optional Input Properties in Framer

We’ve taken a good look at the default properties for an input like the type, name, and placeholder. There are quite a few optional properties that can really come in handy. Let’s take a look at how each of the optional properties works.

The AutoFill Property

AutoFill gives some control over whether or not the browser or a password manager should try to autofill. Be aware that every browser is different and eager to help their users autofill the right info. Most browsers will look at some combination of the input type, name, and text label to figure out what info to autofill, so keep an eye on how you’re labeling things.

The AutoFocus Property

AutoFocus will focus the input immediately when the page loads, as if the user clicked on it or tabbed to it. This can be handy if the primary job to be done on the page is filling out a particular field since it’ll save visitors a step. Just be careful if your form is below the fold because it could cause the page to suddenly jump down and make the visitor feel out of control.

The Value Property

While we can use a placeholder to give a visitor an example of what we expect them to type in a field, the value of the field is still technically blank until something gets typed in. Sometimes, rather than a placeholder, we may want to give the user an actual default value. A super common example is a default order quantity. This number field has a placeholder of one, but if the visitor hits submit, there’s no actual data here. By setting a value of one, the text color changes from gray to white, indicating it’s real data as if the user typed it themselves. Unlike a placeholder, a default value can be incremented with the stepper controls on a number input.

The Step, Min, and Max Properties

Most browsers give us stepper controls to increment the value up and down. By default, the number increments or decrements by one. The step property lets us choose the size of the increments, making it easier to step through larger values. To impose some limits, we can add Min and Max properties. Adding a Min of zero prevents negative numbers. While typing a value outside the Min and Max range is possible, validation will notify the user that something needs fixing.

The Hidden Property

Sometimes we may want to add a bit of data to each form submission without the visitor seeing it. For example, we might want to know which blog post the visitor was looking at when they signed up for our mailing list. We wouldn’t ask them to type the entire title of the blog post. Instead, create an input to populate the blog title automatically, then hide the input so the user doesn’t have to see it. Set a variable for the property that populates automatically from the CMS item being viewed. By hiding the input and removing the label frame around it, the data we receive will contain the title of the blog post being viewed when the visitor decided to join our mailing list.

Now you know how optional input properties like autofill and autofocus work, how to add a default value to an input and how that’s different from a placeholder, how step, Min, and Max work for number inputs, and how hidden inputs can be combined with your CMS to get more info with each submission. Now head to Framer and start using optional input properties with your forms.