16min

Input field

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

Interactive prototype - click to interact:

To follow these instructions more easily, we recommended using the same names as we do for each cell. You may download the final project file here.





Build the basic structure



As a reference, this will be our final structure:

Document image



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
Document image



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
Document image



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

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



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.

Note

Entering text on the canvas changes the text for all states. If you want individual text per state, use the Style Inspector (right sidebar).



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.

Document image





Congratulation, you just build your own input field!

Why not build an Interactive dropdown now?