Axure Tutorial: Digital Input Box and Step Size Settings

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

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.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

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.