Number input

Number inputs are used to increase or decrease numeric values.

Examples

Base

Label
<chi-label for="example-1">Label</chi-label>
<chi-number-input id="example-1"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="input-example-base">Label</label>
  <div class="chi-number-input">
    <input id="input-example-base" type="number" class="chi-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>

<script>chi.numberInput(document.getElementById('input-example-base'));</script>

Disabled

Use the disabled boolean attribute to prevent users from interacting with an input. Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus. Note: The required attribute can not be used on inputs with a disabled attribute specified.

Label
<chi-label for="example-2">Label</chi-label>
<chi-number-input disabled id="example-2"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="input-example-disabled">Label</label>
  <div class="chi-number-input">
    <input id="input-example-disabled" type="number" class="chi-input" value="0" aria-label="Input Label" disabled>
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>

<script>chi.numberInput(document.getElementById('input-example-disabled'));</script>

Min/Max/Step

Use the min and max attributes to define minimum and maximum values on number inputs. Use the step attribute to indicate the expected granularity.

This example only accepts values between 1 and 6, and as the step is 2 and initial value is 1, only odd values are valid. Use the chiNumberInvalid event described in the events section to check if the entered value is valid.

Label
<chi-label for="unique-id-mms1">Label</chi-label>
<chi-number-input id="unique-id-mms1" min="1" max="6" step="2" value="1"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="unique-id-mms1">Label</label>
  <div class="chi-number-input">
    <input id="unique-id-mms1" type="number" class="chi-input" min="0" max="6" step="2" value="1" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>

<script>
  chi.numberInput(
    document.getElementById('unique-id-mms1'),
    {autofix: true}
  );
</script>

Required

Use the required boolean attribute to indicate which inputs must be completed before submitting a form. To render a required input, apply the required attribute to the input. It is also encouraged but not mandatory to apply a required attribute to the corresponding label of the input which will automatically render a red asterisk. Note: For HTML Blueprint implementations, the required attribute is not supported on the label. Please use the alternate method specified below for rendering a red asterisk within the label.

Label
<chi-label for="unique-id-re1" required>Label</chi-label>
<chi-number-input id="unique-id-re1" required></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="unique-id-re1">
    Label
    <abbr class="chi-label__required" aria-label="Required field">*</abbr>
  </label>
  <div class="chi-number-input">
    <input id="unique-id-re1" type="number" class="chi-input" value="0" aria-label="Input Label" required>
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>

<script>chi.numberInput(document.getElementById('unique-id-re1'));</script>

Help

Use chi-label__help to include a help icon that displays helpful information about an input in a popover. A help icon must be contained within an icon button to ensure it receives focus when a user tabs through a form.

Label
Helpful information goes here.
<div class="chi-label__wrapper">
  <chi-label for="unique-id-he1">Label</chi-label>
  <div class="chi-label__help">
    <chi-button id="example__help-button" type="icon" size="xs" variant="flat" alternative-text="Help">
      <chi-icon icon="circle-info-outline"></chi-icon>
    </chi-button>
    <chi-popover id="example__help-popover" position="top" variant="text" arrow reference="#example__help-button">
      Helpful information goes here.
    </chi-popover>
  </div>
</div>
<chi-number-input id="unique-id-he1"></chi-number-input>

<script>
  document
    .querySelector("#example__help-button")
    .addEventListener("click", function () {
      var popoverElem = document.querySelector("#example__help-popover");

      popoverElem.toggle();
    });
</script>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <div class="chi-label__wrapper">
    <label class="chi-label" for="unique-id-he1">Label</label>
    <div class="chi-label__help">
      <div class="chi-button -icon -flat -xs" id="example__help-button" data-target="#example__help-popover" aria-label="Help">
        <div class="chi-button__content">
          <i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
        </div>
      </div>
      <section class="chi-popover chi-popover--top" id="example__help-popover" aria-modal="true" role="dialog">
        <div class="chi-popover__content">
          <p class="chi-popover__text">Helpful information goes here.</p>
        </div>
      </section>
    </div>
  </div>
  <div class="chi-number-input">
    <input id="unique-id-he1" type="number" class="chi-input" value="0" aria-label="Input Label" required>
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>

<script>
  chi.numberInput(document.getElementById('unique-id-he1'));
  chi.popover(document.getElementById('example__help-button'));
</script>

Message

Add a message below an input to store descriptions, validation feedback, and other helpful information.

Label
<chi-label for="unique-id-me1">Label</chi-label>
<chi-number-input id="unique-id-me1" helper-message="Optional helper message"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="unique-id-me1">Label</label>
  <div class="chi-number-input">
    <input id="unique-id-me1" type="number" class="chi-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
  <div class="chi-label -status">Optional helper message</div>
</div>

<script>chi.numberInput(document.getElementById('unique-id-me1'));</script>

Error

Use danger to provide feedback to users when input data fails to validate. To meet accessibility requirements, danger inputs must include an error message explaining the failure and/or how to correct it.

Quantity
<chi-label for="unique-id-er1">Quantity</chi-label>
<chi-number-input id="unique-id-er1" inputstyle="danger" helper-message="Please enter a quantity"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="unique-id-er1">Quantity</label>
  <div class="chi-number-input">
    <input id="unique-id-er1" type="number" class="chi-input -danger" value="0" aria-label="Quantity">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
  <div class="chi-label -status -danger">
    <i class="chi-icon icon-circle-warning" aria-hidden="true"></i>
    Please enter a quantity
  </div>
</div>

<script>chi.numberInput(document.getElementById('unique-id-er1'));</script>

Sizes

Number inputs support the following sizes: xs, sm, md, lg, xl. The default size is md.

Label
Label
Label
Label
Label
<!-- xs -->
<chi-label for="example-3-xs">Label</chi-label>
<chi-number-input size="xs" id="example-3-xs"></chi-number-input>

<!-- sm -->
<chi-label for="example-3-sm">Label</chi-label>
<chi-number-input size="sm" id="example-3-sm"></chi-number-input>

<!-- md -->
<chi-label for="example-3-md">Label</chi-label>
<chi-number-input size="md" id="example-3-md"></chi-number-input>

<!-- lg -->
<chi-label for="example-3-lg">Label</chi-label>
<chi-number-input size="lg" id="example-3-lg"></chi-number-input>

<!-- xl -->
<chi-label for="example-3-xl">Label</chi-label>
<chi-number-input size="xl" id="example-3-xl"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<!-- xs -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-xs">Label</label>
  <div class="chi-number-input -xs">
    <input id="input-example-xs" type="number" class="chi-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-xs'));</script>

<!-- sm -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-sm">Label</label>
  <div class="chi-number-input -sm">
    <input id="input-example-sm" type="number" class="chi-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-sm'));</script>

<!-- md -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-md">Label</label>
  <div class="chi-number-input -md">
    <input id="input-example-md" type="number" class="chi-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-md'));</script>

<!-- lg -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-lg">Label</label>
  <div class="chi-number-input -lg">
    <input id="input-example-lg" type="number" class="chi-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-lg'));</script>

<!-- xl -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-xl">Label</label>
  <div class="chi-number-input -xl">
    <input id="input-example-xl" type="number" class="chi-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-xl'));</script>

Sizes

Number inputs support the following sizes: xs, sm, md, lg. The default size is md.

Label
Label
Label
Label
<!-- xs -->
<chi-label for="example-3-xs">Label</chi-label>
<chi-number-input size="xs" id="example-3-xs"></chi-number-input>

<!-- sm -->
<chi-label for="example-3-sm">Label</chi-label>
<chi-number-input size="sm" id="example-3-sm"></chi-number-input>

<!-- md -->
<chi-label for="example-3-md">Label</chi-label>
<chi-number-input size="md" id="example-3-md"></chi-number-input>

<!-- lg -->
<chi-label for="example-3-lg">Label</chi-label>
<chi-number-input size="lg" id="example-3-lg"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<!-- xs -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-xs">Label</label>
  <div class="chi-number-input -xs">
    <input id="input-example-xs" type="number" class="chi-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-xs'));</script>

<!-- sm -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-sm">Label</label>
  <div class="chi-number-input -sm">
    <input id="input-example-sm" type="number" class="chi-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-sm'));</script>

<!-- md -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-md">Label</label>
  <div class="chi-number-input -md">
    <input id="input-example-md" type="number" class="chi-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-md'));</script>

<!-- lg -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-lg">Label</label>
  <div class="chi-number-input -lg">
    <input id="input-example-lg" type="number" class="chi-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-lg'));</script>

Expanded version

Base

Label
<chi-label for="example-4">Label</chi-label>
<chi-number-input expanded id="example-4"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="input-example-expanded">Label</label>
  <div class="chi-number-input -expanded">
    <input id="input-example-expanded" class="chi-input" type="number" value="0" aria-label="Input Label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content">
        <i class="chi-icon icon-minus" aria-hidden="true"></i>
      </div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content">
        <i class="chi-icon icon-plus" aria-hidden="true"></i>
      </div>
    </button>
  </div>
</div>

<script>chi.numberInput(document.getElementById('input-example-expanded'));</script>

Disabled

Use the disabled boolean attribute to prevent users from interacting with an input. Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus. Note: The required attribute can not be used on inputs with a disabled attribute specified.

Label
<chi-label for="example-5">Label</chi-label>
<chi-number-input expanded disabled id="example-5"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="input-example-expanded-disabled">Label</label>
  <div class="chi-number-input -expanded">
    <input id="input-example-expanded-disabled" class="chi-input" type="number" value="0" aria-label="Input Label" disabled>
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content">
        <i class="chi-icon icon-minus" aria-hidden="true"></i>
      </div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content">
        <i class="chi-icon icon-plus" aria-hidden="true"></i>
      </div>
    </button>
  </div>
</div>

<script>chi.numberInput(document.getElementById('input-example-expanded-disabled'));</script>

Min/Max/Step

Use the min and max attributes to define minimum and maximum values on number inputs. Use the step attribute to indicate the expected granularity.

This example only accepts values between 0 and 6, and as the step is 2 and initial value is 1, only odd values are valid. Use the chiNumberInvalid event described in the events section to check if the entered value is valid.

Label
<chi-label for="unique-id-emm1">Label</chi-label>
<chi-number-input expanded id="unique-id-emm1" min="1" max="6" step="2" value="1"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="unique-id-emm1">Label</label>
  <div class="chi-number-input -expanded">
    <input id="unique-id-emm1" class="chi-input" type="number" min="0" max="6" "step="2" value="1" aria-label="Input Label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content">
        <i class="chi-icon icon-minus" aria-hidden="true"></i>
      </div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content">
        <i class="chi-icon icon-plus" aria-hidden="true"></i>
      </div>
    </button>
  </div>
</div>

<script>
  chi.numberInput(
    document.getElementById('unique-id-emm1'),
    {autofix: true}
  );
</script>

Error

Use danger to provide feedback to users when input data fails to validate. To meet accessibility requirements, danger inputs must include an error message explaining the failure and/or how to correct it.

Quantity
<chi-label for="unique-id-eer1">Quantity</chi-label>
<chi-number-input expanded id="unique-id-eer1" inputstyle="danger" helper-message="Please enter a quantity"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="unique-id-eer1">Label</label>
  <div class="chi-number-input -expanded">
    <input id="unique-id-eer1" class="chi-input -danger" type="number" value="0" aria-label="Input Label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content">
        <i class="chi-icon icon-minus" aria-hidden="true"></i>
      </div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content">
        <i class="chi-icon icon-plus" aria-hidden="true"></i>
      </div>
    </button>
  </div>
  <div class="chi-label -status -danger">
    <i class="chi-icon icon-circle-warning" aria-hidden="true"></i>
    Please enter a quantity
  </div>
</div>

<script>chi.numberInput(document.getElementById('unique-id-eer1'));</script>

Sizes

Expanded number inputs support the following sizes: xs, sm, md, lg, xl. The default size is md.

Label
Label
Label
Label
Label
<!-- xs -->
<chi-label for="example-6-xs">Label</chi-label>
<chi-number-input expanded size="xs" id="example-6-xs"></chi-number-input>

<!-- sm -->
<chi-label for="example-6-sm">Label</chi-label>
<chi-number-input expanded size="sm" id="example-6-sm"></chi-number-input>

<!-- md -->
<chi-label for="example-6-md">Label</chi-label>
<chi-number-input expanded size="md" id="example-6-md"></chi-number-input>

<!-- lg -->
<chi-label for="example-6-lg">Label</chi-label>
<chi-number-input expanded size="lg" id="example-6-lg"></chi-number-input>

<!-- xl -->
<chi-label for="example-6-xl">Label</chi-label>
<chi-number-input expanded size="xl" id="example-6-xl"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<!-- xs -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-expanded-xs">Label</label>
  <div class="chi-number-input -expanded -xs">
    <input id="input-example-expanded-xs" class="chi-input" type="number" value="0" aria-label="Input Label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i>
    </div>
    </button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-xs'));</script>

<!-- sm -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-expanded-sm">Label</label>
  <div class="chi-number-input -expanded -sm">
    <input id="input-example-expanded-sm" class="chi-input" type="number" value="0" aria-label="Input Label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i>
    </div>
    </button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-sm'));</script>

<!-- md -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-expanded-md">Label</label>
  <div class="chi-number-input -expanded -md">
    <input id="input-example-expanded-md" class="chi-input" type="number" value="0" aria-label="Input Label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i></div>
    </button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-md'));</script>

<!-- lg -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-expanded-lg">Label</label>
  <div class="chi-number-input -expanded -lg">
    <input id="input-example-expanded-lg" class="chi-input" type="number" value="0" aria-label="Input Label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i></div>
    </button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-lg'));</script>

<!-- xl -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-expanded-xl">Label</label>
  <div class="chi-number-input -expanded -xl">
    <input id="input-example-expanded-xl" class="chi-input" type="number" value="0" aria-label="Input Label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i></div>
    </button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-xl'));</script>

Sizes

Expanded number inputs support the following sizes: xs, sm, md, lg. The default size is md.

Label
Label
Label
Label
<!-- xs -->
<chi-label for="example-6-xs">Label</chi-label>
<chi-number-input expanded size="xs" id="example-6-xs"></chi-number-input>

<!-- sm -->
<chi-label for="example-6-sm">Label</chi-label>
<chi-number-input expanded size="sm" id="example-6-sm"></chi-number-input>

<!-- md -->
<chi-label for="example-6-md">Label</chi-label>
<chi-number-input expanded size="md" id="example-6-md"></chi-number-input>

<!-- lg -->
<chi-label for="example-6-lg">Label</chi-label>
<chi-number-input expanded size="lg" id="example-6-lg"></chi-number-input>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<!-- xs -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-expanded-xs">Label</label>
  <div class="chi-number-input -expanded -xs">
    <input id="input-example-expanded-xs" class="chi-input" type="number" value="0" aria-label="Input Label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i>
    </div>
    </button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-xs'));</script>

<!-- sm -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-expanded-sm">Label</label>
  <div class="chi-number-input -expanded -sm">
    <input id="input-example-expanded-sm" class="chi-input" type="number" value="0" aria-label="Input Label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i>
    </div>
    </button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-sm'));</script>

<!-- md -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-expanded-md">Label</label>
  <div class="chi-number-input -expanded -md">
    <input id="input-example-expanded-md" class="chi-input" type="number" value="0" aria-label="Input Label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i></div>
    </button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-md'));</script>

<!-- lg -->
<div class="chi-form__item">
  <label class="chi-label" for="input-example-expanded-lg">Label</label>
  <div class="chi-number-input -expanded -lg">
    <input id="input-example-expanded-lg" class="chi-input" type="number" value="0" aria-label="Input Label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i></div>
    </button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-lg'));</script>

Web Component

Properties

Property
Attribute
Description
Type
Default
disabled
disabled
used to determine if component is disabled or not
boolean
undefined
expanded
expanded
used to set component's expanded mode
boolean
undefined
helperMessage
helper-message
To display an additional helper text message below the Number Input
string
undefined
inputstyle
inputstyle
used to provide an input style like 'danger'. Mostly used for testing purposes
"danger" | "success" | "warning"
undefined
max
max
used to set a maximum allowed value
number
undefined
min
min
used to set a minimum allowed value
number
undefined
preventValueMutation
prevent-value-mutation
If set, component value won't be updated by itself.
boolean
undefined
required
required
used to determine if component is required or not
boolean
undefined
size
size
used to determine component's size
string
undefined
state
state
used to provide an input state like 'hover' or 'focus'. Mostly used for testing purposes
string
undefined
step
step
used to set a step to indicate the expected granularity
number
1
value
value
used to hold the value of the number input
string
undefined

Events

Event
Description
Type
chiBlur
Triggered when the element has lost focus.
CustomEvent<any>
chiChange
Triggered when an alteration to the element's value is committed by the user
CustomEvent<string>
chiClick
Triggered when the user clicks on increment/decrement button.
CustomEvent<any>
chiFocus
Triggered when the user sets focus on the element.
CustomEvent<any>
chiInput
Triggered when the user changed the element's value but did not commit the change yet
CustomEvent<string>
chiNumberInvalid
Triggered when the element's value committed by the user is an invalid number
CustomEvent<void>

JavaScript

This component accepts options to configure its behavior.

Option
Default
Description
autofix
false
Fixes automatically values that are out of range of defined by max and min attributes, and any value that doesn't fit the granularity defined by step and the initial value

Preventing memory leaks

Input number components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

var elem = document.getElementById('input-number-1');
var inputNumberComponent = chi.numberInput(elem);
// do stuff
inputNumberComponent.dispose();

TipIt is safe to call the numberInput method more than once, as it will return any previously created number input component associated to the input.

var elem = document.getElementById('input-number-1');
var inputNumberComponent = chi.numberInput(elem);
var elem2 = document.getElementById('input-number-1');
var inputNumberComponent2 = chi.numberInput(elem2);
inputNumberComponent === inputNumberComponent2; // returns true

inputNumberComponent.dispose(); // Only have to do it once.

Accessibility

Keyboard Navigation

KeyFunction
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
Up ArroworShift+Up ArrowIncreases the value.
Down ArroworShift+Down ArrowDecreases the value.
EnterSubmits the entered value.

For comprehensive details on keyboard support, refer to our Keyboard Control Guide.

Visit WebAIM for keyboard techniques.

Guidance for developers
  • Ensure simplicity since not all browsers handle multiple labels linked to the same form element correctly.
  • Label Usage: Assign a label to each input field and make sure the for="" attribute of the label matches the id="" of the corresponding input. Remember, each id must be unique on the page, and each form element should have only one associated label.
  • Indicating Required Fields: Clearly mark required fields using indicators like an asterisk (*) or descriptive text to make them easily identifiable.
  • Help Text: Incorporate help text for all form fields, especially those with constraints. This text should be programmatically associated with the input, for example, using aria-describedby. This is particularly important for masked fields.
  • Test compatibility with various screen readers (like JAWS, NVDA, or VoiceOver) to ensure the number input component is announced correctly. Options should be clearly read out when navigated.
  • Error Validation: Fields with validation errors should use aria-describedby to ensure that error messages are accessible to assistive technologies. If an error message has an id="my-error-message", the corresponding input should include aria-describedby="my-error-message"
Guidance for designers
  • Design with simplicity to accommodate all browsers, minimizing complexities that could hinder accessibility.
  • Obvious Required Fields: Use visual cues, such as an asterisk (*) or supplementary text, to clearly mark required fields and make them easily distinguishable.
  • User-Friendly Help Text: Place help text or examples directly below or inside the number input field to guide users on the correct format.
  • Visible Error Feedback: Design error messages to appear clearly near the number input field when validation fails, using color, icons, or text to make them noticeable.
  • Sufficient Tap Targets: Ensure number input fields have large enough tap targets to accommodate users with different levels of dexterity, following touch-friendly design principles.
  • Use spacing, typography, and visual cues effectively.
  • Maintain consistency in the design of the number input to provide a cohesive user experience.

Find live examples of accessible inputs with different types in DigitalA11y project.

Resources

Other recommendations

Explore additional accessibility tips in the general Accessibility Guide.

WCAG 2.2 Guidelines

  • Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
  • Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
  • Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
  • Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)