Quantity selector

figma:ready

react:ready

scss:ready

freemarker:ready

vue:ready

webComponent:ready

Usage

Code

Accessibility

Import

Import the settings, the text-input, the button and the quantity-selector scss files.


@import 'settings-tools/all-settings';
@import 'components/c.text-input';
@import 'components/c.button';
@import 'components/c.quantity-selector';

Usage


<div class="mc-quantity-selector">
  <button
    class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left"
    aria-controls="qty-selector"
    aria-label="Decrement"
  >
    <svg class="mc-button__icon">
      <use xlink:href="#iconLeftL" />
    </svg>
  </button>
  <input
    id="qty-selector"
    class="mc-text-input mc-quantity-selector__input"
    name="quantity-selector-input"
    aria-label="QuantitySelector"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="0"
    type="number"
    placeholder="Value"
  />
  <button
    aria-controls="qty-selector"
    class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right"
    aria-label="Increment"
  >
    <svg class="mc-button__icon">
      <use xlink:href="#iconRightL" />
    </svg>
  </button>
</div>

Variations

Available sizes

You can use one of the 2 available sizes:

Small : you will have to use small modifier for input text and button, respectively mc-text-input--s, mc-button--s
Medium : this is the default style so you don't need to add a modifier class

Behaviour minimal value

To indicate that decrement button is disabled, the is-disabled class must be added to the button element.