Number Input Component

Animations

The number input animations for the increment and decrement buttons are handled natively by CSS.

For the input animations, you need to add either .number-input--increment or .number-input--decrement modifier class to the number input element when the paddles are clicked.

When it reaches the maximum or minimum value, you can add the .number-input--increment-disabled or .number-input--decrement-disabled to trigger the animation on the input when the paddles will be disabled.

In order to allow the animation to play in repetition, you need to remove the modifier class. A good technique is to first remove the old classes, execute void element.offsetWidth; and then add the modifier of increment or decrement, whichever one you want to animate.

All following examples have animations applied automatically.

Base

The number input is a simple input field with up and down buttons. The buttons are used to increment or decrement the value in the input field. They should not be focusable.

When the number input is at min or max, the decrement or increment button should be disabled.

<span class="number-input">
  <span class="textbox">
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__decrement"
      tabindex="-1"
      aria-hidden="true"
      type="button"
      disabled
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-remove-24" />
      </svg>
    </button>
    <input
      aria-label="Number input"
      class="textbox__control"
      type="number"
      min="0"
      value="0"
    />
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__increment"
      type="button"
      tabindex="-1"
      aria-hidden="true"
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-add-24" />
      </svg>
    </button>
  </span>
</span>

Base with inline label

To add an inline label to the number input, use the label element. The label should be placed before the input field.

<span class="number-input">
  <span class="textbox">
    <label for="number-input-1"> Add a number </label>
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__decrement"
      tabindex="-1"
      aria-hidden="true"
      type="button"
      disabled
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-remove-24" />
      </svg>
    </button>
    <input
      id="number-input-1"
      class="textbox__control"
      type="number"
      min="0"
      value="0"
    />
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__increment"
      type="button"
      tabindex="-1"
      aria-hidden="true"
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-add-24" />
      </svg>
    </button>
  </span>
</span>

With delete button

The delete button should be placed after the input field in the HTML for proper keyboard interation. Visually, it will be moved before the input with CSS.

For the delete button case, min="1" attribute is required for the input.

When the counter is set to 1 you can use number-input--show-delete modifier class to show the delete button. After the counter is incremented to more than 1, the class should be removed.

<span class="number-input number-input--show-delete">
  <span class="textbox">
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__decrement"
      type="button"
      tabindex="-1"
      aria-hidden="true"
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-remove-24" />
      </svg>
    </button>
    <input
      aria-label="Number input"
      class="textbox__control"
      type="number"
      value="1"
      min="1"
    />
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__delete"
      type="button"
      aria-label="Delete item"
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-delete-24" />
      </svg>
    </button>
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__increment"
      type="button"
      tabindex="-1"
      aria-hidden="true"
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-add-24" />
      </svg>
    </button>
  </span>
</span>

Large input field

To create a large input field, use the textbox--large modifier class.

<span class="number-input">
  <span class="textbox textbox--large">
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__decrement"
      tabindex="-1"
      aria-hidden="true"
      type="button"
      disabled
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-remove-24" />
      </svg>
    </button>
    <input
      aria-label="Number input"
      class="textbox__control"
      type="number"
      min="0"
      value="0"
    />
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__increment"
      type="button"
      tabindex="-1"
      aria-hidden="true"
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-add-24" />
      </svg>
    </button>
  </span>
</span>

Fluid input field

To create a fluid input field, use the textbox--fluid modifier class.

<span class="number-input">
  <span class="textbox textbox--fluid">
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__decrement"
      tabindex="-1"
      aria-hidden="true"
      type="button"
      disabled
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-remove-24" />
      </svg>
    </button>
    <input
      class="textbox__control"
      aria-label="Number input"
      type="number"
      min="0"
      value="0"
    />
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__increment"
      type="button"
      tabindex="-1"
      aria-hidden="true"
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-add-24" />
      </svg>
    </button>
  </span>
</span>

Fluid input field with label

To create a fluid input field with a label, use the textbox--fluid modifier class on the label version of number-input.

<span class="number-input">
  <span class="textbox textbox--fluid">
    <label for="number-input-1"> Add a number </label>
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__decrement"
      tabindex="-1"
      aria-hidden="true"
      type="button"
      disabled
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-remove-24" />
      </svg>
    </button>
    <input
      class="textbox__control"
      type="number"
      id="number-input-1"
      min="0"
      value="0"
    />
    <button
      class="icon-btn icon-btn--small icon-btn--transparent number-input__increment"
      type="button"
      tabindex="-1"
      aria-hidden="true"
    >
      <svg aria-hidden="true" class="icon icon--24" width="24" height="24">
        <use href="#icon-add-24" />
      </svg>
    </button>
  </span>
</span>