TEXT FIELD AND TEXT AREA WIDGETS
© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.
Use a text field widget when prototyping a form field for which a short (single-line) response is expected. These are also good for search fields.
Use the text area widget when prototyping a form field for which a long (multi-line) response is expected.
FIELD TYPES (TEXT FIELDS ONLY)
Text field widgets can be given specific input types. In the Properties tab, use the "Type" dropdown to choose the type of input the field will get.
(Text field types are a technology of HTML, not an invention of Axure's—we're just giving you access to them. As such, you'll find that certain field types are more applicable to working in RP than others.)
Web browsers use their own styling for certain types of text fields. In addition, when a field is selected on a mobile device, some field types will cause a specific type of keyboard to appear (like a number keypad instead of the alphanumeric keyboard).
The different types of fields and the results of using that field type are as follows:
Text: Default setting used for basic text entry
Password: Contents are masked as they are entered
Email: May prompt an email keyboard on mobile devices
Number: May prompt a numeric keyboard on mobile devices
Phone Number: May prompt a dial pad on mobile devices
URL: May prompt a url entry keyboard on mobile devices
Search: May add a search button to keyboard on mobile devices
File: Changes the text field into a file-upload button in the web browser, which will open the device’s file browser when clicked (though it is not possible to upload a file to an Axure RP HTML output)
Date: Prompts a browser-styled date picker
Month: Prompts a browser-styled month and year picker
Time: Prompts a browser-styled time picker
Double-click a text field to edit its text. (Double-clicking gives you access to the most common editing function for each widget type.) If you want to add new text to a text field widget, you can just begin typing while the widget is selected.
This pre-loaded text will be the starting text for any additional text added in the browser. If you instead wish to have text in the field that is replaced with user-entered text in the browser, use the hint text feature.
Add hint text to your text field using the "Hint" field in the Properties tab. Hint text will appear in a text field until the user interacts with it, at which time it will disappear to allow the user to fill in the text field as needed.
The hint text can be styled by selecting "Hint Style" in the Properties tab. The default hint style is grey text.
You can choose whether the hint text will be hidden after the field has focus or after the user starts typing. Use the "Hide hint after" radio buttons to choose either "Typing" or "Focus".
LOCATION AND SIZE
To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.
When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging.
Widgets can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or in the Inspector’s Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.
REMOVE THE TEXT FIELD BORDER
Right-click on the text field and select "Hide Border" or choose "Hide Border" in Properties to remove the border.
FONTS AND FILL COLORS
Editable properties of a text field widget's formatting include text font and family, text color, and fill color. These properties can all be controlled from the Style tab of the Inspector, and many are also available in the Style Toolbar at the top of the interface.
If a text field should have styling such as rounded corners, remove the text field border and set its fill to transparent. Then, add a rectangle shape widget behind the transparent text field with the desired styling. The text field will appear to have the styling of the widget behind it.
For a tutorial on creating custom text fields, click here: Custom Text Field Tutorial
In the generated prototype, the user can add text to a text field. You can also dynamically change the text in a text field using the "Set Text" action.
Text in a text field is sometimes stored in a variable for use in other areas of a project. Learn about variables in our Variables reference guide.
In the "Properties" tab, the field "Max Length" is used to specify the maximum length of entry a text field will accept. Typing new characters in the field will be disabled when the max length has been reached.
Clicking the [ENTER] key while a text field has focus can fire the OnClick event of the field's submit button. To assign a submit button to a text field, look in the Properties tab to find the "Submit Button" field. Use the dropdown to choose from eligible widgets.
When text in a text field is set to Read Only, the text already in the field can be selected but new text cannot be added. Set a text field to Read Only by clicking the "Read Only" checkbox in the Properties tab.
Note: text areas are just multi-line text fields, and they behave just the same as text fields (except with respect to field types, which are exclusive to text fields).