Components

Quantity selector

scss:Readyfigma:Ready
vue
:Ready
react
:Ready
freemarker
: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>
Viewport: px 
<div class="example">
  <div class="mc-quantity-selector">
    <button
      class="
        mc-button mc-button--s mc-button--square mc-button--bordered
        mc-quantity-selector__button-left
      "
      aria-controls="qty-selector"
      aria-label="Decrement"
      aria-hidden="true"
      tabindex="-1"
    >
      <svg class="mc-button__icon">
        <use xlink:href="#iconLeftS" />
      </svg>
    </button>


    <input
      id="qty-selector"
      class="mc-text-input mc-text-input--s mc-quantity-selector__input"
      name="quantity-selector-input"
      aria-label="QuantitySelector"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="0"
      type="number"
      placeholder="Value"
      role="spinbutton"
    />


    <button
      aria-controls="qty-selector"
      class="
        mc-button mc-button--s mc-button--square mc-button--bordered
        mc-quantity-selector__button-right
      "
      aria-label="Increment"
      aria-hidden="true"
      tabindex="-1"
    >
      <svg class="mc-button__icon">
        <use xlink:href="#iconRightS" />
      </svg>
    </button>
  </div>
</div>


<div class="example">
  <div class="mc-quantity-selector">
    <button
      class="
        mc-button mc-button--square mc-button--bordered
        mc-quantity-selector__button-left
      "
      aria-controls="qty-selector2"
      aria-label="Decrement"
      aria-hidden="true"
      tabindex="-1"
    >
      <svg class="mc-button__icon">
        <use xlink:href="#iconLeftM" />
      </svg>
    </button>


    <input
      id="qty-selector2"
      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"
      role="spinbutton"
    />


    <button
      class="
        mc-button mc-button--square mc-button--bordered
        mc-quantity-selector__button-right
      "
      aria-controls="qty-selector2"
      aria-label="Increment"
      aria-hidden="true"
      tabindex="-1"
    >
      <svg class="mc-button__icon">
        <use xlink:href="#iconRightM" />
      </svg>
    </button>
  </div>
</div>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="iconLeftS" viewBox="0 0 24 24">
    <path d="M17.09 13h-10a1 1 0 010-2h10a1 1 0 010 2z" />
  </symbol>
  <symbol id="iconRightS" viewBox="0 0 24 24">
    <path
      d="M19.09 11h-6V5a1 1 0 00-2 0v6h-6a1 1 0 000 2h6v6a1 1 0 002 0v-6h6a1 1 0 000-2z"
    />
  </symbol>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="iconLeftM" viewBox="0 0 32 32">
    <path d="M24 17H8a1 1 0 010-2h16a1 1 0 010 2z" />
  </symbol>
  <symbol id="iconRightM" viewBox="0 0 32 32">
    <path
      d="M26 15h-9V6a1 1 0 00-2 0v9H6a1 1 0 000 2h9v9a1 1 0 002 0v-9h9a1 1 0 000-2z"
    />
  </symbol>
</svg>

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
Viewport: px 
<div class="example">
  <div class="mc-quantity-selector">
    <button
      class="
        mc-button mc-button--s mc-button--square mc-button--bordered
        mc-quantity-selector__button-left
      "
      aria-controls="qty-selector"
      aria-label="Decrement"
      aria-hidden="true"
      tabindex="-1"
    >
      <svg class="mc-button__icon">
        <use xlink:href="#iconLeftS" />
      </svg>
    </button>


    <input
      id="qty-selector"
      class="mc-text-input mc-text-input--s mc-quantity-selector__input"
      name="quantity-selector-input"
      aria-label="QuantitySelector"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="0"
      type="number"
      placeholder="Value"
      role="spinbutton"
    />


    <button
      aria-controls="qty-selector"
      class="
        mc-button mc-button--s mc-button--square mc-button--bordered
        mc-quantity-selector__button-right
      "
      aria-label="Increment"
      aria-hidden="true"
      tabindex="-1"
    >
      <svg class="mc-button__icon">
        <use xlink:href="#iconRightS" />
      </svg>
    </button>
  </div>
</div>


<div class="example">
  <div class="mc-quantity-selector">
    <button
      class="
        mc-button mc-button--square mc-button--bordered
        mc-quantity-selector__button-left
      "
      aria-controls="qty-selector2"
      aria-label="Decrement"
      aria-hidden="true"
      tabindex="-1"
    >
      <svg class="mc-button__icon">
        <use xlink:href="#iconLeftM" />
      </svg>
    </button>


    <input
      id="qty-selector2"
      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"
      role="spinbutton"
    />


    <button
      class="
        mc-button mc-button--square mc-button--bordered
        mc-quantity-selector__button-right
      "
      aria-controls="qty-selector2"
      aria-label="Increment"
      aria-hidden="true"
      tabindex="-1"
    >
      <svg class="mc-button__icon">
        <use xlink:href="#iconRightM" />
      </svg>
    </button>
  </div>
</div>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="iconLeftS" viewBox="0 0 24 24">
    <path d="M17.09 13h-10a1 1 0 010-2h10a1 1 0 010 2z" />
  </symbol>
  <symbol id="iconRightS" viewBox="0 0 24 24">
    <path
      d="M19.09 11h-6V5a1 1 0 00-2 0v6h-6a1 1 0 000 2h6v6a1 1 0 002 0v-6h6a1 1 0 000-2z"
    />
  </symbol>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="iconLeftM" viewBox="0 0 32 32">
    <path d="M24 17H8a1 1 0 010-2h16a1 1 0 010 2z" />
  </symbol>
  <symbol id="iconRightM" viewBox="0 0 32 32">
    <path
      d="M26 15h-9V6a1 1 0 00-2 0v9H6a1 1 0 000 2h9v9a1 1 0 002 0v-9h9a1 1 0 000-2z"
    />
  </symbol>
</svg>

With label

When using the Quantity Selector component with a label, you have to import the fields scss file in addition to the other stylesheets.

@import 'components/_c.fields';

To use the quantity selector in your form, you must use the following css classes:

  • mc-field on a container
  • mc-field__label on label tag
  • and mc-field__element in addition of the mc-quantity-selector class on the div element:
Viewport: px 
<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="default"> Label </label>
    <div class="mc-quantity-selector mc-field__element">
      <button
        class="
          mc-button mc-button--s mc-button--square mc-button--bordered
          mc-quantity-selector__button-left
        "
        aria-controls="qty-selector"
        aria-label="Decrement"
        aria-hidden="true"
        tabindex="-1"
      >
        <svg class="mc-button__icon">
          <use xlink:href="#iconLeftS" />
        </svg>
      </button>


      <input
        id="qty-selector"
        class="mc-text-input mc-text-input--s mc-quantity-selector__input"
        name="quantity-selector-input"
        aria-label="QuantitySelector"
        aria-valuemin="0"
        aria-valuemax="100"
        aria-valuenow="0"
        type="number"
        placeholder="Value"
        role="spinbutton"
      />


      <button
        aria-controls="qty-selector"
        class="
          mc-button mc-button--s mc-button--square mc-button--bordered
          mc-quantity-selector__button-right
        "
        aria-label="Increment"
        aria-hidden="true"
        tabindex="-1"
      >
        <svg class="mc-button__icon">
          <use xlink:href="#iconRightS" />
        </svg>
      </button>
    </div>
  </div>
</div>


<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="default"> Label </label>
    <div class="mc-quantity-selector mc-field__element">
      <button
        class="
          mc-button mc-button--square mc-button--bordered
          mc-quantity-selector__button-left
        "
        aria-controls="qty-selector2"
        aria-label="Decrement"
        tabindex="-1"
      >
        <svg class="mc-button__icon">
          <use xlink:href="#iconLeftM" />
        </svg>
      </button>


      <input
        id="qty-selector2"
        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"
        role="spinbutton"
      />


      <button
        class="
          mc-button mc-button--square mc-button--bordered
          mc-quantity-selector__button-right
        "
        aria-controls="qty-selector2"
        aria-label="Increment"
        tabindex="-1"
      >
        <svg class="mc-button__icon">
          <use xlink:href="#iconRightM" />
        </svg>
      </button>
    </div>
  </div>
</div>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="iconLeftS" viewBox="0 0 24 24">
    <path d="M17.09 13h-10a1 1 0 010-2h10a1 1 0 010 2z" />
  </symbol>
  <symbol id="iconRightS" viewBox="0 0 24 24">
    <path
      d="M19.09 11h-6V5a1 1 0 00-2 0v6h-6a1 1 0 000 2h6v6a1 1 0 002 0v-6h6a1 1 0 000-2z"
    />
  </symbol>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="iconLeftM" viewBox="0 0 32 32">
    <path d="M24 17H8a1 1 0 010-2h16a1 1 0 010 2z" />
  </symbol>
  <symbol id="iconRightM" viewBox="0 0 32 32">
    <path
      d="M26 15h-9V6a1 1 0 00-2 0v9H6a1 1 0 000 2h9v9a1 1 0 002 0v-9h9a1 1 0 000-2z"
    />
  </symbol>
</svg>

Behaviour minimal value

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

Viewport: px 
<div class="example">
  <div class="mc-quantity-selector">
    <button
      class="
        mc-button
        is-disabled
        mc-button--s mc-button--square mc-button--bordered
        mc-quantity-selector__button-left
      "
      aria-controls="qty-selector"
      aria-label="Decrement"
      aria-hidden="true"
      tabindex="-1"
    >
      <svg class="mc-button__icon">
        <use xlink:href="#iconLeftS" />
      </svg>
    </button>


    <input
      id="qty-selector"
      class="mc-text-input mc-text-input--s mc-quantity-selector__input"
      name="quantity-selector-input"
      aria-label="QuantitySelector"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="0"
      type="number"
      placeholder="1"
      role="spinbutton"
    />


    <button
      aria-controls="qty-selector"
      class="
        mc-button mc-button--s mc-button--square mc-button--bordered
        mc-quantity-selector__button-right
      "
      aria-label="Increment"
      aria-hidden="true"
      tabindex="-1"
    >
      <svg class="mc-button__icon">
        <use xlink:href="#iconRightS" />
      </svg>
    </button>
  </div>
</div>


<div class="example">
  <div class="mc-quantity-selector">
    <button
      class="
        mc-button
        is-disabled
        mc-button--square mc-button--bordered
        mc-quantity-selector__button-left
      "
      aria-controls="qty-selector2"
      aria-label="Decrement"
      aria-hidden="true"
      tabindex="-1"
    >
      <svg class="mc-button__icon">
        <use xlink:href="#iconLeftM" />
      </svg>
    </button>


    <input
      id="qty-selector2"
      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="1"
      role="spinbutton"
    />


    <button
      class="
        mc-button mc-button--square mc-button--bordered
        mc-quantity-selector__button-right
      "
      aria-controls="qty-selector2"
      aria-label="Increment"
      aria-hidden="true"
      tabindex="-1"
    >
      <svg class="mc-button__icon">
        <use xlink:href="#iconRightM" />
      </svg>
    </button>
  </div>
</div>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="iconLeftS" viewBox="0 0 24 24">
    <path d="M17.09 13h-10a1 1 0 010-2h10a1 1 0 010 2z" />
  </symbol>
  <symbol id="iconRightS" viewBox="0 0 24 24">
    <path
      d="M19.09 11h-6V5a1 1 0 00-2 0v6h-6a1 1 0 000 2h6v6a1 1 0 002 0v-6h6a1 1 0 000-2z"
    />
  </symbol>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="iconLeftM" viewBox="0 0 32 32">
    <path d="M24 17H8a1 1 0 010-2h16a1 1 0 010 2z" />
  </symbol>
  <symbol id="iconRightM" viewBox="0 0 32 32">
    <path
      d="M26 15h-9V6a1 1 0 00-2 0v9H6a1 1 0 000 2h9v9a1 1 0 002 0v-9h9a1 1 0 000-2z"
    />
  </symbol>
</svg>