Quantity

A quantity stepper with increment and decrement controls for counts, amounts and order quantities.

Import

import { Quantity } from "@schukai/monster/source/components/form/quantity.mjs";

Source

View source code

Package

@schukai/monster

Since

4.41.0

Introduction

The Monster Quantity control is a stepper for counts and amounts that should be adjusted incrementally. Use it for shopping carts, ticket counts, stock values or other small numeric choices where plus and minus are clearer than free text alone.

When to use Quantity

Use it for bounded numeric choices: Small ranges and clear step sizes are ideal.
Use it for touch-friendly count changes: Increment and decrement buttons reduce typing effort.
Do not use it for complex numeric input: Large free-form numbers or formulas still need a normal input.

Typical mistakes

Define the step and limits clearly. A quantity control feels unreliable when the user cannot tell why a value stops changing or why certain values are invalid.

Basic Quantity Control

This example configures monster-quantity with minimum, maximum, and step values and mirrors the current quantity below the control.

Current quantity: 2

Javascript

import "@schukai/monster/source/components/form/quantity.mjs";

const quantity = document.getElementById("quantity-demo");
const status = document.getElementById("quantity-demo-status");

quantity.setOption("min", 1);
quantity.setOption("max", 10);
quantity.setOption("step", 1);
quantity.value = 2;

const updateStatus = () => {
  status.textContent = "Current quantity: " + quantity.value;
};

quantity.addEventListener("monster-quantity-change", updateStatus);
updateStatus();<script type="module">import "@schukai/monster/source/components/form/quantity.mjs";

const quantity = document.getElementById("quantity-demo-run");
const status = document.getElementById("quantity-demo-run-status");

quantity.setOption("min", 1);
quantity.setOption("max", 10);
quantity.setOption("step", 1);
quantity.value = 2;

const updateStatus = () => {
  status.textContent = "Current quantity: " + quantity.value;
};

quantity.addEventListener("monster-quantity-change", updateStatus);
updateStatus();</script>

HTML

<div style="display:grid;gap:1rem;align-items:start;">
  <monster-quantity id="quantity-demo"></monster-quantity>
  <p id="quantity-demo-status" style="margin:0;color:var(--monster-color-primary-1);">
    Current quantity: 2
  </p>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Decimal Pricing Stepper

This example uses decimal steps and precision handling to turn monster-quantity into a small pricing stepper.

Units

1.5

Unit price

12.50 EUR

Total

18.75 EUR

Javascript

import "@schukai/monster/source/components/form/quantity.mjs";

const quantity = document.getElementById("quantity-decimal-demo");
const valueBox = document.getElementById("quantity-decimal-value");
const totalBox = document.getElementById("quantity-decimal-total");
const unitPrice = 12.5;

quantity.setOption("min", 0.5);
quantity.setOption("max", 5);
quantity.setOption("step", 0.25);
quantity.setOption("precision", 2);
quantity.value = 1.5;

const render = () => {
  const value = Number(quantity.value || 0);
  valueBox.textContent = value.toFixed(2);
  totalBox.textContent = (value * unitPrice).toFixed(2) + " EUR";
};

quantity.addEventListener("monster-quantity-change", render);
render();<script type="module">import "@schukai/monster/source/components/form/quantity.mjs";

const quantity = document.getElementById("quantity-decimal-demo-run");
const valueBox = document.getElementById("quantity-decimal-value-run");
const totalBox = document.getElementById("quantity-decimal-total-run");
const unitPrice = 12.5;

quantity.setOption("min", 0.5);
quantity.setOption("max", 5);
quantity.setOption("step", 0.25);
quantity.setOption("precision", 2);
quantity.value = 1.5;

const render = () => {
  const value = Number(quantity.value || 0);
  valueBox.textContent = value.toFixed(2);
  totalBox.textContent = (value * unitPrice).toFixed(2) + " EUR";
};

quantity.addEventListener("monster-quantity-change", render);
render();</script>

HTML

<div style="display:grid;gap:1rem;max-inline-size:28rem;">
  <monster-quantity id="quantity-decimal-demo"></monster-quantity>

  <div style="display:grid;gap:0.75rem;grid-template-columns:repeat(3,minmax(0,1fr));">
    <div>
      <strong>Units</strong>
      <div id="quantity-decimal-value">1.5</div>
    </div>
    <div>
      <strong>Unit price</strong>
      <div>12.50 EUR</div>
    </div>
    <div>
      <strong>Total</strong>
      <div id="quantity-decimal-total">18.75 EUR</div>
    </div>
  </div>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

HTML Structure

<monster-quantity></monster-quantity>

JavaScript Initialization

const element = document.createElement('monster-quantity');
document.body.appendChild(element);

Exported

Quantity

Derived from

CustomControl

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomControl.

Option

Type

Default

Description

object

templates

templates.main

string

undefined

Main template

object

templateMapping

templateMapping.plus

string

undefined

Icon (SVG-Path) Plus

templateMapping.minus

string

undefined

Icon (SVG-Path) Minus

classes

object

CSS classes

classes.button

string

monster-button-outline-primary

Button class (e.g. monster-button-outline-primary)

classes.input

string

Additional class for input

features

object

Feature toggles

features.editable

boolean

true

Allow manual input

features.hold

boolean

true

Press-and-hold accelerates

features.enforceBounds

boolean

true

Clamp value when manual input is out of bounds

value

number

Current value

min

number

Use Number.NEGATIVE_INFINITY and Number.POSITIVE_INFINITY for no bounds

max

number

undefined

Use Number.NEGATIVE_INFINITY and Number.POSITIVE_INFINITY for no bounds

step

number

Increment/decrement step

precision

number

Round to N decimal places (null = no explicit rounding)

disabled

boolean

false

Disable the input field (also disables manual input)

placeholder

string

Placeholder text

inputmode

string

decimal

For mobile keyboards

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomControl.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomControl.

State query methods

value()

Returns

{number|null}

Current numeric value

value(v)

Parameters

v {number|string|null}: v

Sets the value programmatically (including clamping & FormValue)

Static methods

[instanceSymbol]()4.41.0

Events

monster-quantity-change

This Control shows an input field with increment and decrement buttons.

getCSSStyleSheet()

If you want a stylesheet, return it here.

getTag()

Options

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()4.41.0

Events

monster-quantity-change

This Control shows an input field with increment and decrement buttons.

Events

The component emits the following events:

monster-quantity-change
monster-quantity-change
monster-quantity-change

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.