This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jordan Robert Dobson
Posted May 17 - Read on Facebook

MODULE: InputField Class

**UPDATE** Use this module now:

OLD Demo & Module Post:

This module allows you to easily add text & date inputs to your prototypes. You can also easily listen for onFocus, onBlur and onInput events by providing a function for the input to call to get the values and the input field involved.

Valid input types with keyboard support are: text, email, number, url, tel, password, search, time, month, date and datetime-local

You’re also able to set the placeholder and placeholderFocus values, a default value, maxLength, fontSize, indent and autoCapitalize properties.

Here’s a quick usage example:

searchField = new InputField
 width: Screen.width
 height: 132
 fontSize: 48
 indent: 48
 color: “black”
 backgroundColor: “white”
 placeHolder: “Search…”
 onInputFunction: myOnInputFunction

Here’s a more advanced usage example:

ageField = new InputField
 name: “ageField”
 width: Screen.width
 type: “number”
 height: 132
 fontSize: 48
 indent: 48
 color: “black”
 backgroundColor: “white”
 placeHolder: “Enter Your Age Please”
 placeHolderFocus: “Your Age”
 maxLength: 2
 onInputFunction: myOnInputFunction
 onFocusFunction: onInputFocus
 onBlurFunction: onInputBlur

I hope this helps you in your prototyping!

Framer Studio Source - Simple:

Framer Studio Source - Advanced:

Module Code:

Happy New Year all!



Peter Botond

Jordan Robert Dobson When i focus on an input the page scrolls back to the top. How can i deactivate this?

Laura Baker

This is a really helpful module thanks Jordan! I was just wondering if you can update the field type to toggle between the "password" and "text" input or whether it has to stay as on or the other?

Jean-Francois Hector

Thanks a lot

Rich Zarick

Yup, this is a serious upgrade from previous modules. Thank you sir, this will get some good usage

Jordan Robert Dobson

Thanks to Lauren for the video!

Jared Palmer

Great job. This is awesome.

Stephen Crowley

Been doing some rad stuff with this module, thanks for all the hard work Jordan!

Jeongmin Kim

brilliant idea!

Andrew Nalband


Marc Krenn

Brilliant. Absolutely brilliant. This module will be a true time saver for all of us!

Adria Jimenez

Which is the difference from this module with my module? You could have collaborated with my module so everyone could have benefit from your changes :)

Giovanni Caruso

Cool! Thanks for sharing :)

Jorn van Dijk

Good lawd!

Jordan Robert Dobson

Let me know if you use this and would like any features added.

Ban Nguyen

Very nice! Thank you for this.

Ban Nguyen

Jordan Robert Dobson, I am trying to put these fields inside a container (new Layer, ScrollComponent, PageComponent), it seems odd with y loc, not sure if i am missing anything:

Jordan Robert Dobson

I added an update to this that allows you to change the color of the placeholder, set more attributes on the font weight, font size, line height, font family... etc..

Also you can validate if entries fit a pattern or matches a string or an array of strings.

Also... there are 6 events now Input, Focus, Blur, Valid, Invalid, Match that you can listen for on the input field.

Luca Galvani

Jordan Robert Dobson any idea why when I import this module Framer throws this error?
TypeError: Object is not a constructor (evaluating 'new InputField') o.O

Didi Medina

would love to see some ideas built on this module for inspiration, if anyone has any to share :)

Nelson Vasconcelos

Hi Jordan Robert Dobson, thanks for uploading this amazing module!!!

I am testing the module on my Android but whenever I click on an input field the keyboard goes up and immediately closes. It seems there's a blur event dispatched just after the focus. Did you get this bug?

Ban Nguyen

Is there a way to assign .focus()?

Andrew Nalband

Jordan Robert Dobson is there a way to clear the input? I tried myInput.value = "" but that didn't seem to work

Jordan Robert Dobson

Here is the latest version as of Tuesday last week...

Chad Lonberger

Hey Jordan Robert Dobson, this is an awesome module thanks for sharing it! Quick question - any idea how to prevent shuddering on the device when the input is 400+ pixels down the screen? Noticing it on IOS whenever the keyboard opens ->

Floris Verloop

Amazing man!

Adam Noffsinger

Jordan have you explored removing the form assistant (< > and Done) from the safari keyboard? I'm trying to accomplish this now to emulate native app behavior but all signs are pointing to it not being possible.

Jordan Robert Dobson

Hey all... I forgot to mention this updated with a new example and a much improved event system. See this post on

Nelson Vasconcelos

Thank you very much Jordan! This is my favorite Framer module! :)

Jordan Robert Dobson

I'm also posting this code up at

Read the entire post on Facebook