Anatomy

You may find the Number Input in several presentations, either as an Input, or a Label with increment and decrement buttons next to it. This component requires that the user less effort than selecting the input field, tapping the digit “2” on the keypad, and hitting Enter or dismissing the keyboard. For example, to increase the number of guests from 1 to 2 in a form, the user only needs one tap on the plus button. Anatomy for Number Input Component

  • Possible Names: Number Input, Stepper Input, Input Number, Spin Button, Counter, Stepper, Field Number
  • Grouping: Inputs

Properties

PropertyValueDefault ValueIs Required?DESCRIPTION
minnumber0NoThe minimum value of the Number Input
maxnumber-YesThe maximum value of the Number Input
stepnumber1NoSpecify how much the value should increase / decrease upon clicking on up / down button
valuenumber-NoCurrent value of Input
isDisabledyes / nonoNoWhether or not the component is disabled
sizesm / md / lgmdNoSpecify the size of the Number Input
isReadOnlyyes/nonoNoSpecify if the component should be read-only

Stencil

Layers structure

NumberInput.variants
    ├── MinusButton.comp
    │   └── icon.comp
    │       └── svg.img
    ├── Input.comp
    │   └── value.text
    └── PlusButton.comp
        └── icon.comp
            └── svg.img

HTML Structure

BEM

<div class="NumberInput NumberInput--md">
  <!-- Button (Down) -->
  <button class="Button" type="button" title="Decrease number" aria-label="Decrease number" tabindex="-1" aria-disabled="false">
    <span class="Icon">
      <svg width="16" height="17" fill="currentColor" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" role="img"><path d="M14.389 7.667H1.61a.278.278 0 00-.278.277v1.112c0 .153.125.277.278.277H14.39a.278.278 0 00.278-.277V7.944a.278.278 0 00-.278-.277z" /></svg>
    </span>
  </button>
 
  <!-- Input -->
  <input class="Input" type="number" placeholder="100" autocomplete="off" role="spinbutton" aria-valuemin="1" aria-valuemax="100" aria-valuenow="25" value="25" />
 
  <!-- Button (Up) -->
  <button class="Button" type="button" title="Increase number" aria-label="Increase number" tabindex="-1" aria-disabled="false">
    <span class="Icon">
      <svg width="16" height="17" fill="currentColor" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" role="img"><path d="M14.389 7.667H8.833V2.11a.278.278 0 00-.277-.278H7.444a.278.278 0 00-.277.278v5.556H1.61a.278.278 0 00-.278.277v1.112c0 .153.125.277.278.277h5.556v5.556c0 .153.124.278.277.278h1.112a.278.278 0 00.277-.278V9.333h5.556a.278.278 0 00.278-.277V7.944a.278.278 0 00-.278-.277z" /></svg>
    </span>
  </button>
</div>
 

Tailwind

<div class="flex items-center space-x-4 w-40">
  <!-- Button (Down) -->
  <button class="bg-white border border-black hover:bg-gray-100 rounded-full p-2" type="button" title="Decrease number" aria-label="Decrease number" tabindex="-1" aria-disabled="false">
    <span>
      <svg width="16" height="17" fill="currentColor" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" role="img"><path d="M14.389 7.667H1.61a.278.278 0 00-.278.277v1.112c0 .153.125.277.278.277H14.39a.278.278 0 00.278-.277V7.944a.278.278 0 00-.278-.277z" /></svg>
    </span>
  </button>
 
  <!-- Input -->
  <input class="py-1 text-2xl w-full focus:bg-gray-100 outline-none text-center" type="number" placeholder="100" autocomplete="off" role="spinbutton" aria-valuemin="1" aria-valuemax="100" aria-valuenow="25" value="25" />
 
  <!-- Button (Up) -->
  <button class="bg-white border border-black hover:bg-gray-100 rounded-full p-2" type="button" title="Increase number" aria-label="Increase number" tabindex="-1" aria-disabled="false">
    <span>
      <svg width="16" height="17" fill="currentColor" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" role="img"><path d="M14.389 7.667H8.833V2.11a.278.278 0 00-.277-.278H7.444a.278.278 0 00-.277.278v5.556H1.61a.278.278 0 00-.278.277v1.112c0 .153.125.277.278.277h5.556v5.556c0 .153.124.278.277.278h1.112a.278.278 0 00.277-.278V9.333h5.556a.278.278 0 00.278-.277V7.944a.278.278 0 00-.278-.277z" /></svg>
    </span>
  </button>
</div>
 
<style>
  /* Turn Off Number Input spinners */
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
</style>