Quantity selector

Allows users to enter a number and easily adjust it up or down with a simple step-by-step control.

Overview

The quantity selector component is a Vue component that lets users choose a numeric quantity using a decrease button, a number input, and an increase button. It clamps values to a configurable range and emits both an immediate value update and a debounced change event, making it well suited to cart-style interactions that trigger API calls.

Basic usage

Importing the component

To use the quantity selector component, import it along with its styles:


                                                        
                                                        
                                                            import { DsQuantitySelector } from "@coloplast/design-system";
                                                        import "@coloplast/design-system/dist/components/quantity-selector/ds-quantity-selector.css";

Example usage

The component works with v-model. The accessible labels for the input and the two buttons are required:


                                                        
                                                        
                                                            <template>
                                                          <DsQuantitySelector
                                                            v-model="quantity"
                                                            aria-label-input="Quantity"
                                                            aria-label-decrease-quantity="Decrease quantity"
                                                            aria-label-increase-quantity="Increase quantity"
                                                            :min="1"
                                                            :max="99"
                                                            @change="updateBasket"
                                                          />
                                                        </template>
                                                        
                                                        <script setup>
                                                        import { ref } from "vue";
                                                        import { DsQuantitySelector } from "@coloplast/design-system";
                                                        
                                                        const quantity = ref(1);
                                                        const updateBasket = (value) => {
                                                          // debounced - a good place to call an API
                                                        };
                                                        </script>

The update:modelValue event (used by v-model) fires immediately, while the change event is debounced (debounce-duration, default 200ms) so you can safely trigger network requests from it. Values are coerced to whole numbers and clamped between min and max; the buttons step by step and disable automatically at the bounds.

Component playground and props

Explore and test the props via the ‘Controls’ tab in the interactive Storybook example:

Accessibility

The value is a native number input (inputmode="numeric"), so it works with on-screen numeric keyboards and native keyboard entry.

The input and both buttons require accessible labels via the aria-label-input, aria-label-decrease-quantity, and aria-label-increase-quantity props.

The input uses aria-live="polite" so screen readers announce value changes.

The decrease and increase buttons are disabled at the minimum and maximum values respectively, and when the whole component is disabled.

Use the id prop to associate an external <label> with the input.

Internationalisation

The component renders no visible text of its own - all human-readable strings are the three required aria labels, which can be localised. It uses logical CSS properties and supports right-to-left (RTL) layouts.