der-lukas/framerinput

Design with Inputs in Framer.

Framer Input

INTRODUCTION

From inputs in Design to fully functional ones in Code. A Framer module that allows you to create single-line and multi-line input fields in Code and Design. Complete with an interactive iOS keyboard simulator.

Watch the video.

Overview

All included properties and methods.

Properties	Type	Description
new InputLayer	Class	Initiate a new Input object.
InputLayer.wrap	Method	Wrap input object around two layers.
InputLayer.value	String	Text value of input layer.
InputLayer.focusColor	Color	Color of input layer on focus.
InputLayer.multiLine	Boolean	Single or multi-line input field.
InputLayer.onEnterKey	Event	On return key press.
InputLayer.onSpaceKey	Event	On space key press.
InputLayer.onBackSpaceKey	Event	On backspace key press.
InputLayer.onCapsLockKey	Event	On caps space key press.
InputLayer.onShiftKey	Event	On shift key press.
InputLayer.onValueChange	Event	On input key press.
InputLayer.onInputFocus	Event	On input focus.
InputLayer.onInputBlur	Event	On input blur.

Design Guide

First, grab the input.coffee file and place it within the /modules folder (located within your .framer folder). Then, to include the module, require the Input class:

{InputLayer} = require "input"

Once you have created a simple input field in Design, you can make the wrapper layer (background) and the placeholder copy (text) targetable, and wrap them in Code.

The InputLayer.wrap method takes two parameters:

• background — The background layer of the input field.
• text — The placeholder text layer of the input field.

input = InputLayer.wrap(background, text)

Now, the input field is functional. It automatically sets a focusColor for you (changes the color of the text), but this is completely customizable. The input object has its own onValueChange method. To use the text contents as you’re typing, simply reference the value property in combination with the event.

input.onValueChange ->
	print input.value 

The wrap method allows you to pass in optional properties, too. For instance, if you’d like to create a multiLine input field (also known as a textarea), you can simply pass it along:

input = InputLayer.wrap(bg, text, multiLine: true)

Or if you'd like to create any other type of input field, you can pass along the type parameter and set it to any given input type available:

input = InputLayer.wrap(bg, text, type: "password")

See full list of HTML input types

Code Guide

New InputLayers can be initiated in Code, too.

input = new InputLayer

This will create a functional input field, with its default placeholder. Note that the InputLayer class is based on the TextLayer class, and thus will inherit its properties and methods as well.

input = new InputLayer
	text: "Placeholder"

To style the placeholder text, you can use all of the TextLayer properties.

input.fontSize = 40
input.fontWeight = 600
input.color = "red"

The Input class has its own onValueChange method, too. To use the text contents as you’re typing, simply reference the value property in combination with the event.

input.onValueChange ->
	print input.value 

---

Examples

• Input in Code. Create and style a single input field.
• Textarea in Code. Create and style a multi-line input field.
• Input in Design. Wrap a single input field.
• Textarea in Design. Wrap a multi-line input field.
• Chat Example. Type and send messages.

More Resources

• MDN Keyboard Event Reference.
• MDN Key Property Reference.
• HTML DOM Events Reference.

---

Contact

• Follow me @benjaminnathan.
• Follow @framer.