Quantity

Using the Quantity element allows you to create any type of numbers as input.

Element Tab

The Quantity element has the following fields in the Element Tab:

• Name - Title of the field.

• Placeholder - You can either fill the placeholder or not (It is not required).

• Description - Description of the field.

• Step - Defines the up and down (increase/decrease) buttons' step value.

• Default Value - The default value will be shown to the users when they open a cost calculator.

• Min Value - minimum value that the quantity field can take

• Max Value - maximum value that the quantity field can take

• Unit Name - You can put unit measures, such as kg(kilograms), gr(grams), m (meters), etc, to this field. You can also decide whether you want unit measures, for example, kg, to show on the right or left.

• Hide Min/Max Values - Enable to hide the minimum and maximum values set to the field in the calculator.

• Multiply by Unit Price – enables the use of a unit price multiplier. When toggled on, the final value will be calculated by multiplying the selected value by the specified unit price.

• Unit Price – the cost per unit of the selected value. This numeric field supports decimal values and defines how much each unit contributes to the total.

• Unit – a label indicating the measurement unit used for the selected value (such as centimeters, meters, or inches).

Styles

Under this tab, you can select the suitable style for the quantity field according to your needs:

The field offers two styles: Default and Side Buttons. With the Side Buttons style, you can choose the position of the buttons and display them separately, giving you greater control over the field’s appearance:

Here are the available styles:

Default

Side Buttons

Side Buttons (both sides)

Side Buttons (separated)

Side Buttons (both separated)

Settings Tab

The Quantity element has the following fields in the Settings Tab:

• Currency Sign - Enable if you want to show the currency sign in the total summary.

• Currency Settings - Applies global currency settings such as thousand and decimal. separators, the number of decimals to the entered value.

• Round Value - Enable if you want to round the value to the whole number in the total summary.

• Required - Defines whether the element will be required to be filled or not.

• Hidden by Default - The element will be hidden by default. You can make it visible using conditional system.

• Calculate hidden by default - If any case hides the element: via the Hidden by Default setting or hidden by some condition, the element's default value (if it is set) will be counted in the formula.

• Show in Grand Total - Disable if you want to hide the element in Grand Total.

• Additional Classes - Add extra classes to the HTML elements to further style changes

Set Measurement Unit

This setting allows you to add a measuring unit (Ω, cm, kg, inch, etc.) to the field.

• Unit Symbol - enter the unit symbol

• Position - select the position where the symbol should be displayed relative to the number

• Thousands separator - select the symbol to separate thousands

• Number of decimals - indicate the number of decimals in the fractional part

• Decimal separator - select the symbol to separate the fractional part

Here is how it will look:

Fractional (Decimal) Value Input

When using the Quantity field with its default settings, it is not possible to input fractional numbers. Any fractional number entered will automatically be rounded to the nearest whole number:

Enabling Fractional Input

To allow the input of fractional numbers in the Quantity field, the Currency Settings must be enabled. This setting ensures that the Quantity field can handle and correctly display fractional values.

Here is the result:

Example of Using Quantity Element

Let’s create a BMI Calculator with a quantity element.

The default height value will be 170 with a unit value in cm. The default weight value will be 60 with a unit value in kg. There will be a formula element to calculate the BMI.

Choose the correct styles for the fields:

That’s how it will look on the user’s page:

You can set up Multiply by Unit Price when you want the value a user inputs to multiply by the cost. For example, if the cargo service delivers packages from the USA to Europe at 25 USD/ kg. The values will multiply by 25 to calculate the fees for the delivery.

That's how it will look on the user's page