Element: Quantity Input Box

Created by Mike B, Modified on Wed, 24 Jan 2024 at 01: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