User Manual

Input

Input elements should always be used within a <form>. These can vary by type, for example: Text, Password, E-mail, ... Some input elements require some additional attributes like the type "Amount", which requires a min, max and step attribute.

Calendar

A component based on the inpit provided in the Salesforce Lightning Design System: https://www.lightningdesignsystem.com/components/input

We have no control over the HTML, so all the styling is being overwritten in the slds-input-calendar scope.

 

    
      

<div class="a-input s-slds-input-calendar">
	<label class="a-input__label"><!-- label --></label>
	<div class="a-input__container">
		<lightning-input class="a-input__field slds-form-element">
		</lightning-input>
	</div>
</div>

Date

The type makes use of a the default date input. Use this on mobile.


    
      



  

<div class="a-input    ">

  
     <label class="a-input__label" for="">
      Calendar input

      
    </label>
  

  <div class="a-input__container a-input__container--with-icon icon-calendar">
    

    <input
      class="a-input__field"
      type="date"
      id=""
      name=""
      placeholder="Calendar placeholder"
      
    />

    

    
  </div>

  

  
</div>

E mail

Change the input type to e-mail in order to define the correct type of input.


    
      



  

<div class="a-input    ">

  
     <label class="a-input__label" for="">
      E-mail input

      
    </label>
  

  <div class="a-input__container  ">
    

    <input
      class="a-input__field"
      type="email"
      id=""
      name=""
      placeholder="E-mail input placeholder"
      
    />

    

    
  </div>

  

  
</div>







  

<div class="a-input  is-disabled  ">

  
     <label class="a-input__label" for="">
      E-mail input

      
    </label>
  

  <div class="a-input__container  ">
    

    <input
      class="a-input__field"
      type="email"
      id=""
      name=""
      placeholder="E-mail input placeholder"
      disabled
    />

    

    
  </div>

  

  
</div>

Number

Change the input type to number in order to define the correct type of input. This will enable extra controls on the input field and allows only numbers to be inserted.

€
€ 

    
      



  

<div class="a-input    ">

  
     <label class="a-input__label" for="">
      Number input

      
    </label>
  

  <div class="a-input__container  ">
    

    <input
      class="a-input__field"
      type="number"
      id=""
      name=""
      placeholder="Number input placeholder"
      
    />

    

    
  </div>

  

  
</div>







  

<div class="a-input    a-input--currency">

  
     <label class="a-input__label" for="">
      Number with currency input

      
    </label>
  

  <div class="a-input__container  ">
    
      <span class="a-input__currency">
        €
      </span>
    

    <input
      class="a-input__field"
      type="number"
      id=""
      name=""
      placeholder="1.000,00"
      
    />

    

    
  </div>

  

  
</div>







  

<div class="a-input a-input--large   a-input--currency">

  
     <label class="a-input__label" for="">
      Large number with currency input

      
    </label>
  

  <div class="a-input__container  ">
    
      <span class="a-input__currency">
        €
      </span>
    

    <input
      class="a-input__field"
      type="number"
      id=""
      name=""
      placeholder="1.000,00"
      
    />

    

    
  </div>

  

  
</div>







  

<div class="a-input  is-disabled  ">

  
     <label class="a-input__label" for="">
      Number input

      
    </label>
  

  <div class="a-input__container  ">
    

    <input
      class="a-input__field"
      type="number"
      id=""
      name=""
      placeholder="Number input placeholder"
      disabled
    />

    

    
  </div>

  

  
</div>

Password

Change the input type to password in order to define the correct type of input. This will hide the password and display dots instead.


    
      



  

<div class="a-input   js-toggle-password ">

  
     <label class="a-input__label" for="">
      Password input

      
    </label>
  

  <div class="a-input__container  ">
    

    <input
      class="a-input__field"
      type="password"
      id=""
      name=""
      placeholder="Password input placeholder"
      
    />

    

    
      <span class="a-input__toggle-password"></span>
    
  </div>

  

  
</div>







  

<div class="a-input  is-disabled js-toggle-password ">

  
     <label class="a-input__label" for="">
      Password input

      
    </label>
  

  <div class="a-input__container  ">
    

    <input
      class="a-input__field"
      type="password"
      id=""
      name=""
      placeholder="Password input placeholder"
      disabled
    />

    

    
      <span class="a-input__toggle-password"></span>
    
  </div>

  

  
</div>

Select

Change the input type to text in order to define the correct type of input. This is the most default version of letting the user insert content in forms.


    
      



<div class="a-input a-input--select  ">

  
     <label class="a-input__label" for="">
      Select
    </label>
  

  <div class="a-input__container">
    <select class="a-input__field" id="" name="">
      
        <option selected disabled>Select placeholder</option>
      

      
        <option value="Option 1">Option 1</option>
      
        <option value="Option 2">Option 2</option>
      
        <option value="Option 3">Option 3</option>
      
    </select>
  </div>

</div>





<div class="a-input a-input--select  is-disabled">

  
     <label class="a-input__label" for="">
      Select
    </label>
  

  <div class="a-input__container">
    <select class="a-input__field" id="" name="">
      
        <option selected disabled>Select placeholder</option>
      

      
        <option value="Option 1">Option 1</option>
      
        <option value="Option 2">Option 2</option>
      
        <option value="Option 3">Option 3</option>
      
    </select>
  </div>

</div>

Tel

Change the input type to telephone in order to define the correct type of input.


    
      



  

<div class="a-input    ">

  
     <label class="a-input__label" for="">
      Telephone input

      
    </label>
  

  <div class="a-input__container  ">
    

    <input
      class="a-input__field"
      type="tel"
      id=""
      name=""
      placeholder="Telephone input placeholder"
      
    />

    

    
  </div>

  

  
</div>







  

<div class="a-input  is-disabled  ">

  
     <label class="a-input__label" for="">
      Telephone input

      
    </label>
  

  <div class="a-input__container  ">
    

    <input
      class="a-input__field"
      type="tel"
      id=""
      name=""
      placeholder="Telephone input placeholder"
      disabled
    />

    

    
  </div>

  

  
</div>

Text

Change the input type to text in order to define the correct type of input. This is the most default version of letting the user insert content in forms.


    
      



  

<div class="a-input    ">

  
     <label class="a-input__label" for="">
      Text input

      
    </label>
  

  <div class="a-input__container  ">
    

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

    

    
  </div>

  

  
</div>







  

<div class="a-input  is-disabled  ">

  
     <label class="a-input__label" for="">
      Text input

      
    </label>
  

  <div class="a-input__container  ">
    

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

    

    
  </div>

  

  
</div>

Textarea

Replace the <input> by a <textarea> and add the modifier a-input--textarea to apply the correct styling.


    
      



<div class="a-input a-input--textarea  ">

  
     <label class="a-input__label" for="">
      Textarea
    </label>
  

  <div class="a-input__container">
    <textarea
      class="a-input__field"
      id=""
      name=""
      placeholder="Textarea placeholder"
    ></textarea>
  </div>

  

</div>





<div class="a-input a-input--textarea  is-disabled">

  
     <label class="a-input__label" for="">
      Textarea
    </label>
  

  <div class="a-input__container">
    <textarea
      class="a-input__field"
      id=""
      name=""
      placeholder="Textarea placeholder"
    ></textarea>
  </div>

  

</div>

With feedback

Change the input type to text in order to define the correct type of input. This is the most default version of letting the user insert content in forms.


    
      



  

<div class="a-input is-success   ">

  
     <label class="a-input__label" for="">
      Text input

      
    </label>
  

  <div class="a-input__container  ">
    

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

    

    
  </div>

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

  
</div>







  

<div class="a-input is-error   ">

  
     <label class="a-input__label" for="">
      Text input

      
    </label>
  

  <div class="a-input__container  ">
    

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

    

    
  </div>

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

  
</div>







<div class="a-input a-input--textarea is-error ">

  
     <label class="a-input__label" for="">
      Textarea
    </label>
  

  <div class="a-input__container">
    <textarea
      class="a-input__field"
      id=""
      name=""
      placeholder="Textarea placeholder"
    ></textarea>
  </div>

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

</div>

Modifiers

  • a-input--textarea

    Textarea's use the same styling attributes as a normal input field. In order to define a textarea and add specific styling, this modifier must be added.

  • a-input__container--with-icon

    Adjust the a-input__container child element of the component to hold an icon and style it along. Use this modifier when the input field needs to hold an icon on the right.

  • a-input--select

    Indicate that the input field is a select box with options in order for the right styling to be applied.

  • a-input--large

    Adjust the a-input__field child element of the component to a larger field and font size and weight.

  • a-input--currency

    Number with currency label use the same styling attributes as a normal input field. In order to define a number with currency and add specific styling, this modifier must be added.

States

  • is-disabled/disabled

    Set the state to disabled and change how the input field looks by using the attribute or by using a class

  • is-error

    Indicate that the inserted input of the user has created an error or is faulty

  • is-warning

    Indicate a warning when the user inserts a value in an input field