Quantity

Introduction

The <monster-quantity> component is a modern and user-friendly numeric input control featuring increment and decrement buttons. It provides fine-grained control over numerical input, with support for minimum and maximum bounds, precision rounding, and manual input. Ideal for forms where users need to adjust quantities with ease, it combines visual clarity with accessibility and configurability.

Key Features

• Increment and decrement buttons: Allows users to change values with a click, supporting both mouse and keyboard navigation.
• Press-and-hold acceleration: Holding down a button speeds up value changes for efficient adjustments.
• Manual input with validation: Supports direct typing when enabled, with real-time clamping and precision control.
• Custom icons and classes: Use your own SVG paths and CSS classes to visually tailor the component.
• Minimum, maximum, and step options: Set precise boundaries and increments for full control over valid values.
• Precision rounding: Automatically rounds to a fixed number of decimal places if needed.
• Accessible keyboard behavior: Use ArrowUp and ArrowDown keys to adjust the value via keyboard.
• Fully reactive: Updates internal state, form value, and emits change events when the value changes.

Improving the user experience

The <monster-quantity> component enhances traditional number inputs by combining visual buttons with intelligent behavior such as clamping, step incrementing, and acceleration on press-and-hold. It ensures a consistent and predictable experience across desktop and mobile environments while enabling better control over input ranges and formats.

This component is especially useful in contexts like product quantity selectors, numeric rating inputs, or any scenario where precise numeric control improves usability and reduces input errors.

Efficiency in the development process

Built with Monster.js conventions, the <monster-quantity> component is easy to integrate and configure via HTML attributes or JavaScript. Developers can define options declaratively using the data-monster-options attribute or manipulate the value dynamically using the value property. Support for dynamic features like enabling/disabling manual input, customizing the template, and enforcing bounds makes it versatile in a wide range of applications.

The component adheres to best practices in accessibility and component lifecycle, ensuring high maintainability, responsiveness, and reusability across projects.

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.

• 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

Static methods

Lifecycle methods

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

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.