Number Input

Number inputs are used to increase or decrease numeric values.

Examples

Base

An initial value is optional. If an initial value is not provided, 0 will be taken as default.

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

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>

Sizes

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

Label
Label
Label
Label
<!-- 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.
<!-- 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>

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"></i>
      </div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content">
        <i class="chi-icon icon-plus"></i>
      </div>
    </button>
  </div>
</div>

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

Disabled

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"></i>
      </div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content">
        <i class="chi-icon icon-plus"></i>
      </div>
    </button>
  </div>
</div>

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

Sizes

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

Label
Label
Label
Label
<!-- 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.
<!-- 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"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus"></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"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus"></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"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus"></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"></i></div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content"><i class="chi-icon icon-plus"></i></div>
    </button>
  </div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-xl'));</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
inputstyle
inputstyle
used to provide an input style like 'danger'. Mostly used for testing purposes
string
undefined
max
max
used to set a maximum allowed value
number
Number.MAX_SAFE_INTEGER
min
min
used to set a minimum allowed value
number
Number.MIN_SAFE_INTEGER
preventValueMutation
prevent-value-mutation
If set, component value won't be updated by itself.
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
'0'

Events

Event
Description
Type
chiChange
CustomEvent<string>

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

Example autofix=true

This example only accepts values between 0 and 6, and as the step is 2 and initial value is 1, only even values are valid. If you manually write any pair value, or a value greater than 5 or lesser than 1, the component will automatically correct the value.

<div class="chi-form__item -row">
  <div class="chi-number-input -expanded">
    <input id="input-number-3" class="chi-input" type="number" value="1" min="0" max="6" step="2" aria-label="Input label">
    <button class="chi-button -icon" aria-label="Decrease">
      <div class="chi-button__content">
        <i class="chi-icon icon-minus"></i>
      </div>
    </button>
    <button class="chi-button -icon" aria-label="Increase">
      <div class="chi-button__content">
        <i class="chi-icon icon-plus"></i>
      </div>
    </button>
  </div>
</div>
<script>
  chi.numberInput(
    document.getElementById('input-number-2'),
    {autofix: true}
  );
</script>

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

Accessibility guidelines coming soon