Element: Quantity Input Box

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


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.  


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


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 atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article