website logo
HomepageCommunitySign up & Download for free
⌘K
USER MANUAL
User Interface
General
Styling
Color Management
Widgets
Presentation & Interaction
Interactions
Sharing & Export
Resources
JavaScript
Embedded HTML
Custom CSS
Plugins
Cloud
General
Account Registration
Projects
Prototypes
Subscription, Licensing and Billing
Company Profile
Types of Users
User Management
Sharing
Public Link
Embed Code
Prototype Settings
User Profile
FAQ
Tutorials
How to build
Interactive dropdown
Interactive tab bar with content
Modal dialog
Table
Input field
Upload and share prototypes
Changelog
Docs powered by archbee 
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?

Updated 03 Jun 2022
Did this page help you?
Yes
No
UP NEXT
Upload and share prototypes
Docs powered by archbee 
TABLE OF CONTENTS
Build the basic structure