Element: Quantity Input Box

Created by Mike B, Modified on Wed, 24 Jan at 1:22 PM by Mike B

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.



Negative Numbers


To allow negative numbers, add the largest negative number you want it to allow in the minimum box.




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.






Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article