Input

Elementric components - just copy the HTML code of an element and paste it into your code (after you read the installation guide).

Standard Inputs

To use the inputs vertically, you need to put them in a div with .inputs-block class

          
Copy
          
  <div class="inputs-block">
    <input type="text" class="standard-input" id="name" placeholder="Name">
    <input type="password" class="standard-input" id="pass" placeholder="Password">
  </div>
          
        

Color

To change the color of an input add one of the following classes: .blue-input, .dark-input, .grey-input, .green-input, .red-input or .yellow-input

          
Copy
          
  <div class="inputs-block">
    <input type="text" class="standard-input blue-input" id="blue" placeholder="Blue">
    <input type="text" class="standard-input dark-input" id="dark" placeholder="Dark">
    <input type="text" class="standard-input grey-input" id="grey" placeholder="Grey">
    <input type="text" class="standard-input green-input" id="green" placeholder="Green">
    <input type="text" class="standard-input red-input" id="red" placeholder="Red">
    <input type="text" class="standard-input yellow-input" id="yellow" placeholder="Yellow">
  </div>
          
        

Rounded Inputs

Add the .round class for rounded inputs

          
Copy
          
  <div class="inputs-block">
    <input type="text" class="standard-input round" id="name" placeholder="Name">
    <input type="password" class="standard-input round" id="pass" placeholder="Password">
  </div>
          
        

Square

Add the .square class for square inputs

            
Copy
            
  <input type="email" class="standard-input square" id="email" placeholder="Email">
            
          

Icon

To add a icon to an input you need to put them in a div with the .input-icon class.

You can choose an icon from FontAwesome Icons and copy the HTML <i> tag.

            
Copy
            
  <div class="inputs-block">
    <div class="input-icon">
      <i class="far fa-user"></i>
      <input type="text" class="standard-input round" id="name" placeholder="Name">
    </div>

    <div class="input-icon">
      <i class="fas fa-key"></i>
      <input type="password" class="standard-input round" id="password" placeholder="Password">
    </div>
  </div>
            
          

Border

              
Copy
              
  <div class="inputs-block">
    <div class="border-inputs">
      <input type="text" class="border-input" id="email" required>
      <label>Email</label>
    </div>

    <div class="border-inputs">
      <input type="password" class="border-input" id="password" required>
      <label>Password</label>
    </div>
  </div>
              
            

Textarea

You can change the size of the Textarea by changing the rows="" and cols="" value.

              
Copy
              
  <textarea id="textarea" rows="6" cols="50" placeholder="Message"></textarea>
              
            

Select

            
Copy
            
  <div class="inputs-block">
    <select id="example1">
      <option value="Example1">Example 1</option>
      <option value="Example2">Example 2</option>
      <option value="Example3">Example 3</option>
      <option value="Example4">Example 4</option>
    </select>

    <select id="example2" class="round">
      <option value="Example1">Example 1</option>
      <option value="Example2">Example 2</option>
      <option value="Example3">Example 3</option>
      <option value="Example4">Example 4</option>
    </select>
  </div>
            
          

Sizing

The standard width of inputs it's 25rem (400px)

Full-width

Add the .full-width class for 100% width.

            
Copy
            
  <div class="inputs-block">
   <input type="text" class="standard-input full-width" id="name" placeholder="Name">
   <input type="password" class="standard-input full-width" id="pass" placeholder="Password">
  </div>
            
          

50% width

Add the .width-50 class for 50% width.

            
Copy
            
  <div class="inputs-block">
   <input type="text" class="standard-input width-50" id="name" placeholder="Name">
   <input type="password" class="standard-input width-50" id="pass" placeholder="Password">
  </div>