input value modificator

The value modificator element can be used for numeric input. It features an optional label as well as success, error and warning states.

The plus and minus icons on the right allow to move the value up or down by the step size.

Min and max attributes can also be defined to limit the range of allowed input.

In order for the label to work correctly, the input tag needs a unique id attribute and the label tag needs the same id for the for attribute.
According to the Web Content Accessibility Guidelines (WCAG), it is highly reccomended to use a label together with the value modificator.
table of content

component variations

input value modificator

Open on blank page
<div class="a-value-modificator">
  <input
    type="number"
    id="value-modificator-1"
    name="input value modificator"
    min="0"
    max="100"
    step="5"
  />
  <button
    type="button"
    class="a-value-modificator__minus-button"
    aria-label="Minus"
  >
    <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
  </button>
  <button
    type="button"
    class="a-value-modificator__plus-button"
    aria-label="Plus"
  >
    <i class="a-icon boschicon-bosch-ic-add"></i>
  </button>
</div>

Input value modificator readonly

Open on blank page
<div class="a-value-modificator">
  <input
    type="number"
    id="value-modificator-2"
    name="Input value modificator readonly"
    min="0"
    max="100"
    step="5"
    readonly=""
  />
  <button
    type="button"
    class="a-value-modificator__minus-button"
    disabled=""
    aria-label="Minus"
  >
    <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
  </button>
  <button
    type="button"
    class="a-value-modificator__plus-button"
    disabled=""
    aria-label="Plus"
  >
    <i class="a-icon boschicon-bosch-ic-add"></i>
  </button>
</div>

Input value modificator disabled

Open on blank page
<div class="a-value-modificator">
  <input
    type="number"
    id="value-modificator-3"
    name="Input value modificator disabled"
    min="0"
    max="100"
    step="5"
    disabled=""
  />
  <button
    type="button"
    class="a-value-modificator__minus-button"
    disabled=""
    aria-label="Minus"
  >
    <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
  </button>
  <button
    type="button"
    class="a-value-modificator__plus-button"
    disabled=""
    aria-label="Plus"
  >
    <i class="a-icon boschicon-bosch-ic-add"></i>
  </button>
</div>

Input value modificator with start value

Open on blank page
<div class="a-value-modificator">
  <input
    type="number"
    id="value-modificator-4"
    name="Input value modificator with start value"
    min="0"
    max="100"
    step="5"
    value="20"
  />
  <button
    type="button"
    class="a-value-modificator__minus-button"
    aria-label="Minus"
  >
    <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
  </button>
  <button
    type="button"
    class="a-value-modificator__plus-button"
    aria-label="Plus"
  >
    <i class="a-icon boschicon-bosch-ic-add"></i>
  </button>
</div>

Input value modificator with label

Open on blank page
<div class="a-value-modificator">
  <label for="5">Select amount</label>
  <input
    type="number"
    id="value-modificator-5"
    name="Input value modificator with label"
    min="0"
    max="100"
    step="5"
  />
  <button
    type="button"
    class="a-value-modificator__minus-button"
    aria-label="Minus"
  >
    <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
  </button>
  <button
    type="button"
    class="a-value-modificator__plus-button"
    aria-label="Plus"
  >
    <i class="a-icon boschicon-bosch-ic-add"></i>
  </button>
</div>

Input value modificator with label readonly

Open on blank page
<div class="a-value-modificator">
  <label for="6">Select amount</label>
  <input
    type="number"
    id="value-modificator-6"
    name="Input value modificator with label readonly"
    min="0"
    max="100"
    step="5"
    readonly=""
  />
  <button
    type="button"
    class="a-value-modificator__minus-button"
    disabled=""
    aria-label="Minus"
  >
    <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
  </button>
  <button
    type="button"
    class="a-value-modificator__plus-button"
    disabled=""
    aria-label="Plus"
  >
    <i class="a-icon boschicon-bosch-ic-add"></i>
  </button>
</div>

Input value modificator with label disabled

Open on blank page
<div class="a-value-modificator">
  <label for="7">Select amount</label>
  <input
    type="number"
    id="value-modificator-7"
    name="Input value modificator with label disabled"
    min="0"
    max="100"
    step="5"
    disabled=""
  />
  <button
    type="button"
    class="a-value-modificator__minus-button"
    disabled=""
    aria-label="Minus"
  >
    <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
  </button>
  <button
    type="button"
    class="a-value-modificator__plus-button"
    disabled=""
    aria-label="Plus"
  >
    <i class="a-icon boschicon-bosch-ic-add"></i>
  </button>
</div>

Input value modificator with very log label

Open on blank page
<div class="a-value-modificator">
  <label for="8">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </label>
  <input
    type="number"
    id="value-modificator-8"
    name="Input value modificator with very log label"
    min="0"
    max="100"
    step="5"
  />
  <button
    type="button"
    class="a-value-modificator__minus-button"
    aria-label="Minus"
  >
    <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
  </button>
  <button
    type="button"
    class="a-value-modificator__plus-button"
    aria-label="Plus"
  >
    <i class="a-icon boschicon-bosch-ic-add"></i>
  </button>
</div>

Input value modificator with very long label readonly

Open on blank page
<div class="a-value-modificator">
  <label for="9">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </label>
  <input
    type="number"
    id="value-modificator-9"
    name="Input value modificator with very long label readonly"
    min="0"
    max="100"
    step="5"
    readonly=""
  />
  <button
    type="button"
    class="a-value-modificator__minus-button"
    disabled=""
    aria-label="Minus"
  >
    <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
  </button>
  <button
    type="button"
    class="a-value-modificator__plus-button"
    disabled=""
    aria-label="Plus"
  >
    <i class="a-icon boschicon-bosch-ic-add"></i>
  </button>
</div>

Input value modificator with very long label disabled

Open on blank page
<div class="a-value-modificator">
  <label for="10">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </label>
  <input
    type="number"
    id="value-modificator-10"
    name="Input value modificator with very long label disabled"
    min="0"
    max="100"
    step="5"
    disabled=""
  />
  <button
    type="button"
    class="a-value-modificator__minus-button"
    disabled=""
    aria-label="Minus"
  >
    <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
  </button>
  <button
    type="button"
    class="a-value-modificator__plus-button"
    disabled=""
    aria-label="Plus"
  >
    <i class="a-icon boschicon-bosch-ic-add"></i>
  </button>
</div>

additional content

Instance API

The instance API can be accessed by the component property of the dialog element.

Method description
setValue(value: number) sets the value of the input field of the value modificator. Be aware with this the value can also be sets to values, which can not be achieved via the plus/minus buttons. E.g. steps are set to 5, with the usage of setValue(11), 11 will be the value. Using than the buttons will change it to 6 or 16 accordingly.

Event API

Event Handlers can be registered by calling component.addEventListener(name, callback). They can be removed by calling component.removeEventListener(name, callback) with the same arguments. Also, addEventListener returns an unsubscription function that, once called, achieves the same.

Event Name parameters description
onInput value: number Will be triggered when the value of the input is set and contain the new value

styles SCSS

/* stylelint-disable no-descending-specificity */
.a-value-modificator {
  @include text-field;
  display: flex;

  input {
    // case: input is not disabled, but button is disabled due to min/max limit
    &:not(:disabled) {
      ~ .a-value-modificator__minus-button,
      ~ .a-value-modificator__plus-button {
        &:disabled {
          background-color: var(--neutral__enabled__fill__default);
          border-bottom-color: var(--neutral__enabled__front__default);
        }
      }

      // case: input is not disabled, but readonly
      &[readonly] {
        ~ .a-value-modificator__minus-button,
        ~ .a-value-modificator__plus-button {
          background-color: var(--plain__enabled__fill__default);
          color: var(--plain__enabled__front__default);
          border-bottom-color: var(--plain__enabled__front__default);
          pointer-events: none;
        }
      }
    }
  }

  input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type='number'] {
    -moz-appearance: textfield;
  }

  label {
    max-width: calc(100% - 8rem);
  }
}