Axure Tutorial: Basic Widget-Text Field

Well Joe
3 min readJun 9, 2022

https://axureboutique.com/blogs/axure-tutorials/axure-tutorial-basic-widget-text-field

Introduction

I introduced you to Rectangles (Box) last time, so let’s talk about text field this time.

By the way, in this series of tutorials, some widgets such as placeholders will not be repeated, because they are relatively simple and there are no special features that need to be set.

The text field is actually a very simple widget, and it can not change much. Some more complex features, such as the words “Please enter XX”, disappear after clicking, and need to use conditional judgment, etc.We will talk about how to do these when we talk about practical examples in the future.

1. Basic features of text field:

I won’t say much about the widget attribute of the text field. I hope you can learn by yourself.In fact, this is a very basic thing and those who can use Word will basically know it.

I don’t know if people are getting used to right clicking on each widget to see the context menu. This time, we mainly talk about the contents of the context menu:

1. Edit max length:

The text field can limit the number of letters entered in it. The effect is that when the number of letters entered exceeds the number of letters, it cannot be entered. Right-click on the text field — edit max length an input will appear to ask us to enter the max length.

After entering the max length, the generated page will be limited to the corresponding number of letters. For example, if the limit is 5 letters, you can only input 5 letters, regardless of letters, numbers and symbols.

2. Input type

There are many type of text field, such as password. The characters entered will be displayed as ciphertext. These styles can be changed according to your needs.

3. Set Read Only:

Axure also has a very strange setting for the text field, that is, you can set the text field to a read-only state, so that the text inside cannot be edited (why is the text field not allowed to be edited…), please see the example for the specific effect.

4. Assign Submit Button:

This feature may be difficult to understand just by looking at the above words, but we often encounter the actual feature. For example, when we often press enter after entering the input field in various login interfaces, we will login directly, which is equivalent to clicking the “login” button.

2. Interactive feature of text field

The Interactions of the text field is basically the same as that of the box (rectangle). However, the unique feature Text Changed is very useful in making interactive effects and is often used for input verification.

Well, this time I will introduce it here first, and I will continue to introduce other widget next time, so stay tuned.

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).

Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.

#axure widgets #ux design #Axure templates #Axure tutorial #Axure #Product Design & Product Manager #UI / UX / Interaction Design

--

--