User Manual

Input-group

Input fiels are placed within a group, represented by one label. This can only be used in combination with l-grid. IMPORTANT!!! Do not use this component to place input fields with each a label next to each other. Use standard l-grid for that.

This component exists so that one label can group multiple input fields and they are aligned correctly when for example an error is geven.

With grid


    
      



<div class="o-input-group ">
  

<label for="" class="a-label o-input-group__label undefined">
  Bedrag van / tot
</label>



  <div class="o-input-group__items l-grid l-grid--with-margins">
    

      

  

<div class="a-input o-input-group__item l-grid__col-6-12 is-error   ">

  

  <div class="a-input__container  ">
    

    <input
      class="a-input__field"
      type="text"
      id=""
      name=""
      placeholder="input 1"
      
    />

    

    
  </div>

  
    <div class="a-input__feedback ">
      <p class="a-input__feedback-message">This is an error</p>
    </div>
  

  
</div>





    

      

  

<div class="a-input o-input-group__item l-grid__col-6-12   ">

  

  <div class="a-input__container  ">
    

    <input
      class="a-input__field"
      type="text"
      id=""
      name=""
      placeholder="input 1"
      
    />

    

    
  </div>

  

  
</div>





    
  </div>
</div>