Introduction

The Quantity Input Box lets users more quickly type a number via a numeric keypad. The input will contain increment and decrement buttons called spinners, which make it easy to make small adjustments without having to select and type.






Benefits, Features & Use Cases


The number input box is an intuitive normal UI pattern, your customers will be able to easily increment or decrement the number of items of the same product and watch how the price changes instantly.  


Example: 

For the number of guests in a room (Kids, adults) you can separate them and set different prices for each quantity input box. 


You may want to use the quantity input box when:


Incrementing and decrementing make sense

The number doesn’t have a leading zero

The value doesn’t contain letters, slashes, minus signs, or decimal points.

The number isn’t very large



Watch It In-Action


For this example, every adult ticket costs 10.00 and every kid's ticket costs 5.00




How to Activate & Use This Feature


To add a Quantity Input Box first, click on the "+ Add Element" 


Then click on the "Quantity Box"

 


Settings & Options


First, set a title to your quantity input box, for example, Guests


You can change the input frontend box style to "Default" or "Compact"



Set the price for the product 


In the advanced options, you can make the Quantity Box required, so users will be forced to select an option before getting a price quote or proceeding to check out


You can also set a Min Value and Max Value for each quantity box. 



Finally, you can create an info icon with a tooltip in the front so you can add extra explanation while keeping your calculator form organized. 



Additional Information



Related Features


Element: Custom Math: https://designful.freshdesk.com/support/solutions/articles/48001142309-element-custom-math

Element: Slider: https://designful.freshdesk.com/support/solutions/articles/48001207026-element-slider



Limitations


It doesn't admit decimals