Quantity Input Box
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.
Table of Contents
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.
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
