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

Password Text Field

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.

Preview the completed prototype for this tutorial

 

Widgets Setup

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

Hiden Input Interaction

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.

Shown Input Interactions

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

Shown Icon Interaction

3.  Select Shown Icon. When this icon is clicked, set Eye Icon to Hidden Icon state; Set Input to Shown State;; Focus Shown Input; Assign Hidden Input text to Shown Input


Hidden Icon


2. Set the interactions of Hidden
 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.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.