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.
As a reference, this will be our final structure:
First let’s create the basic elements.
We start with a text element Label.
Create a rectangle InputField
Inside InputField we now create a text element Value
Adjust the styling of the text element:
Select the Label and Inputfield , group them horizontally (⌘⌥G).
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.
Congratulation, you just build your own input field!
Why not build an Interactive dropdown now?