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" min="0" max="100" step="5" id="1" />
  <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 disabled

Open on blank page
<div class="a-value-modificator -disabled">
  <input type="number" min="0" max="100" step="5" id="2" 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 label readonly

Open on blank page
<div class="a-value-modificator -readonly">
  <label for="3">
    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" min="0" max="100" step="5" id="3" 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

Open on blank page
<div class="a-value-modificator">
  <label for="4">
    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" min="0" max="100" step="5" id="4" />
  <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>

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 {
  position: relative;
  height: 3rem;
  margin: 0.5rem;
  display: flex;

  &.-readonly {
    .a-value-modificator__minus-button,
    .a-value-modificator__plus-button {
      background-color: var(--plain__enabled__fill__default);
    }
  }

  &.-disabled {
    .a-value-modificator__minus-button,
    .a-value-modificator__plus-button,
    .a-value-modificator__minus-button:disabled,
    .a-value-modificator__plus-button:disabled {
      color: var(--neutral__disabled__front__default);
      background-color: var(--neutral__disabled__fill__default);
      border-bottom-color: var(--neutral__disabled__front__default);
    }
  }

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

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

  input {
    height: 100%;
    // minus two icons with margins
    width: calc(100% - 6rem);
    border: 0;
    background-color: var(--neutral__enabled__fill__default);
    border-bottom: 0.0625rem solid var(--neutral__enabled__front__default);
    color: var(--neutral__enabled__front__default);
    line-height: 1.5rem;
    font-size: 1rem;
    padding: 0 1rem;

    &:disabled {
      color: var(--neutral__disabled__front__default);
      background-color: var(--neutral__disabled__fill__default);
      border-bottom-color: var(--neutral__disabled__front__default);
    }

    &[readonly],
    &:hover[readonly],
    &:active[readonly],
    &:focus[readonly],
    &:disabled[readonly] {
      background-color: var(--plain__enabled__fill__default);
      pointer-events: none;
    }

    &:focus {
      background-color: var(--neutral__focused__fill__default);
    }

    &:focus-visible {
      border: 3px solid var(--plain__enabled__front__default);
      outline: 3px solid var(--background);
      outline-offset: -6px;
      padding-inline: 13px;
      padding-block-end: 1px;
    }
  }

  label {
    position: absolute;
    align-self: flex-start;
    margin: 0.25rem 1rem auto 1rem;
    font-size: 0.75rem;
    max-width: calc(100% - 7rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--neutral__enabled__front__default);

    + input {
      padding-top: 1.125rem;
      padding-bottom: 0.3125rem;

      &:focus-visible {
        padding-block-end: 0.375rem;
      }
    }
  }

  &__minus-button,
  &__plus-button {
    border: 0;
    cursor: pointer;
    background-color: var(--neutral__enabled__fill__default);
    color: var(--neutral__enabled__front__default);
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom: 0.0625rem solid var(--neutral__enabled__front__default);

    &:hover {
      background-color: var(--neutral__enabled__fill__hovered);
    }

    &:active {
      background-color: var(--neutral__enabled__fill__pressed);
    }

    &:focus-visible {
      @include focus-inside;
    }

    &:disabled {
      color: var(--neutral__disabled__front__default);
      background-color: var(--neutral__enabled__fill__default);
      pointer-events: none;
    }
  }
}