Chi Design System

Number inputs

In order to use a number input just use an input type="number" with the class a-input, add two buttons next to it and wrap all items inside a div with the class a-inputWrapper. Input numbers also needs a modifier, -compact.

<div class="a-inputWrapper -compact">
  <input type="number" class="a-input" value="0">
  <button></button>
  <button></button>
</div>

We have two modifiers in relation to the size of the component.

  • -small
  • -large

small size

large size

Example

<div class="a-inputWrapper -compact">
  <input type="number" class="a-input -small" value="0">
  <button></button>
  <button></button>
</div>