Components

Quantity

Let users step a quantity up or down.

Work in progress

This section is not defined in the Dr. Max Design System library (design.drmax.eu) yet. See the Developer tab for usage.

The decrease and increase buttons carry accessible labels (decrease-label, increase-label), and quantity-label names the input and prefixes the live-region announcement made when the value changes. Use aria-labelledby to combine an external element (e.g. the product name) into each control's accessible name so "Increase quantity" becomes unambiguous in a list of products.