User Manual

Amount-input

A small input component used to insert a certain value based on the context, where this component is used. It is mainly prefixed by a certain unit to indicate better meaning to the inserted digits.

Default

The default version of this component is displayed in white and should only be used on colored backgrounds.

€ 

    
      

  

<div class="a-amount-input js-amount-input ">
  <span class="a-amount-input__simulator"></span>

  <span class="a-amount-input__unit">&euro;</span>

  <div class="a-amount-input__container">
    <input
      class="a-amount-input__field"
      type="number"
      placeholder="0.00"
      value=""
    />
  </div>
</div>

Primary theme

The primary color themed version of this component changes the default white one and can be used on a white background.

  • a-amount-input--primary
€ 

    
      

  

<div class="a-amount-input js-amount-input a-amount-input--primary">
  <span class="a-amount-input__simulator"></span>

  <span class="a-amount-input__unit">&euro;</span>

  <div class="a-amount-input__container">
    <input
      class="a-amount-input__field"
      type="number"
      placeholder="0.00"
      value=""
    />
  </div>
</div>

Modifiers

  • a-amount-input--primary

    Change the color/theme of the default amount-input component to use the primary color defined in the styleguide.

JavaScript

  • js-amount-input

    This class is used to attach the JavaScript functionality onto the component in the styleguide. It makes sure that the input field is scaled when the user inserts a value. The unit is moved accordingly because of the styling applied.