In this guide, we will show you how to build an interactive input field.

Interactive prototype - click to interact:







As a reference, this will be our final structure:



First let’s create the basic elements.

We start with a text element Label.

• Add an example text i.e. Address
• For our example set the width to a fixed value i.e. 100px
• Set the text alignment to right
• Add 8px margin on the right

Create a rectangle InputField

• Set the width to stretch
• Set the height to 40px
• Give it a 1px border at all sides
• Add rounded corners 12px
• Set a gray background color
• Set the layout to center left
• Add 8px padding to the left and right



Inside InputField we now create a text element Value

Adjust the styling of the text element:

• Set the width to stretch
• Activate the option "Editable in Prototype", this option can be found in the text section of the style inspector



Select the Label and Inputfield , group them horizontally (⌘⌥G).

• Name it Wrapper
• Set the layout to center left
• Set the width to 300px



Now create a widget from the InputFieldand add predefined states Mouse Over and Pressed. You can style these states as you like.

Furthermore we add the predefined Focus state. For this state we choose a vibrant border color.

Next delete the text in the canvas if the field is not already empty.



Enter the In-place presentation mode and try out your input field. It should be possible to click into it and be able to input text. You can also enter the focus state with the tab key. Just create some duplicates to test it out.