Axure Tutorial: Digital Input Box and Step Size Settings

Introduction

Digital Input Box

Axure's standard text field enables digital input. However, its style may not meet the needs, and its step size cannot be set. In this tutorial, we will learn how to customize digital input box and set the step size.

Features to be Realized

Enter the number of step input box. When you click the - or + button, the number in the number input box will decrease or increase according to the entered step number.

Preview the completed prototype for this tutorial

 

Widgets Setup

1. Drag two text field and name one Input and the other Step.

2. Make a button to reduce the number and a button to increase the number. Place on the left and right sides of the Input text field respectively.

Interactions Setup

Interaction setup

1. Set that when the + button is clicked, the number of Input text field is equal to the number of Input + Step.

2. When you set the number in Step text field, each time you click the + or - button, the number in the Input text filed will increase or decrease according to the number in Step text field.

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.