Axure Tutorial: High-Fidelity Password Text Field

Introduction

The password text field is a common control. Although the default text field provided by Axure can realize simple password input, it can not realize the feature of switching ciphertext / plaintext. This tutorial teaches you how to make a high-fidelity password text field.

Features to be Realized

1. Hover, focus, correct and error styles of text field
2. Click the eye icon to switch between plaintext / ciphertext of the text field.

How to Realize these Features

1. Create a rectangular dynamic panel. The states of the dynamic panel includes default, hover, focus, correct, error.
2. Create a text field with two states of plaintext and ciphertext, and click the eye button to switch the states.

Widgets Setup

1. Create a dynamic panel with two text fields, one of which is set as password type and the other as default. Name the dynamic panel Input.

2. Create a dynamic panel with 2 icons, one as a showing icon and one as a hiding icon. Name the dynamic panel Eye Icon.

3. Create a dynamic panel with five rectangles, with default, hover, focus, error and right states.

Interactions Setup

1. Select Hidden Input (ciphertext) and set: when Hidden Input got focus, the state of Bg rectangle dynamic panel are set to focus; When the Hidden Input lost focus, if the text length is 0 and the mouse is not within the range of the whole component, set the dynamic panel to the Error state; if the text length is not 0 and the mouse is not within the range of the whole component, set the dynamic panel to the Right state.

2. Set the interactions of Shown Input in the same way.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

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

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