Blaze UI Input Input-Groups

Last Updated : 10 Jun, 2022

Blaze UI is a framework-free open-source UI toolkit. It provides a great foundation for building scalable websites faster. Blaze UI comes with a lot of pre-styled components and many utilities so that developers don’t have to build everything from scratch.

In this article we will know about the Input Groups, there are lots of variety in inputs groups. That an input group defines that, there will be multiple input fields in a group. All types of input groups are mentioned and described below:

Blaze UI Input Groups:

Inline: This is used to make the input group into a single line
Fixed Width: This is used to set the width of a specific input field from the input group.
Stacked: This is used to make the input field group’s input field stacked one over another.
Buttons: This is used to attach a button on the input field, there can be multiple buttons as per requirements.
Rounded: This is used to make the input group edge rounded

Syntax:

<div class="c-input-group 
       input-group-types-class">
       ...
</div>

Example 1: Below example illustrates the Blaze UI Input Group using inline, fixed-width, and stacked input groups.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Blaze UI Input Input-Groups</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <style> 
        html{ 
            font-family: sans-serif; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;">GeeksforGeeks</h2> 
        <h3>Blaze UI Input Input Group</h3> 
    </div> 
      
    <div class="u-window-box-large"> 
        <h4>Inline Input Group</h4> 
        <div class="c-input-group"> 
            <div class="o-field"> 
              <input class="c-field" name="lInput"
                  placeholder="Left Text Input"> 
            </div> 
            
            <div class="o-field"> 
              <input class="c-field" name="mInput"
                  placeholder="Middle Text Input"> 
            </div> 
            
            <div class="o-field"> 
              <input class="c-field" name="mInput"
                  placeholder="Right Text Input"> 
            </div> 
        </div> 
    </div> 
      
    <div class="u-window-box-large"> 
        <h4>Fixed Width Input Group</h4> 
        <div class="c-input-group"> 
          <div class="o-field"> 
              <input class="c-field" 
                  placeholder=".c-input-group"> 
            </div> 
            
            <div class="o-field o-field--fixed" 
              style="width:60%"> 
              <input class="c-field" 
                  placeholder="FIXED 60% input width"> 
            </div> 
            
            <div class="o-field"> 
              <input class="c-field" 
                  placeholder=".c-input-group"> 
            </div> 
        </div> 
    </div> 
      
    <div class="u-window-box-large"> 
        <h4>Stacked Input Group</h4> 
        <div class="c-input-group c-input-group--stacked"> 
            <div class="o-field"> 
              <input class="c-field" name="lInput"
                  placeholder="Left Text Input"> 
            </div> 
            
            <div class="o-field"> 
              <input class="c-field" name="mInput"
                  placeholder="Middle Text Input"> 
            </div> 
            
            <div class="o-field"> 
              <input class="c-field" name="mInput"
                  placeholder="Right Text Input"> 
            </div> 
        </div> 
    </div> 
</body> 
    
</html>

Output:

Blaze UI Input Groups

Example 2: Below example illustrates the Blaze UI Input Group using rounded and buttons input groups.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Blaze UI Input Input-Groups</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <style> 
        html{ 
            font-family: sans-serif; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="u-centered"> 
      <h2 style="color: green;">GeeksforGeeks</h2> 
      <h3>Blaze UI Input Input Group</h3> 
    </div> 
      
    <div class="u-window-box-xlarge"> 
        <h4>Rounded Input Group</h4> 
        <div class="c-input-group c-input-group--rounded"> 
            <div class="o-field"> 
              <input class="c-field" name="lInput"
                  placeholder="Left Text Input"> 
            </div> 
            
            <div class="o-field"> 
              <input class="c-field" name="mInput"
                  placeholder="Middle Text Input"> 
            </div> 
            
            <div class="o-field"> 
              <input class="c-field" name="mInput"
                  placeholder="Right Text Input"> 
            </div> 
        </div> 
    </div> 
      
    <div class="u-window-box-xlarge"> 
        <h4>Buttons Input Group</h4> 
        <div class="c-input-group"> 
            <button class="c-button c-button--brand"> 
                Left Button 
            </button> 
            
            <div class="o-field"> 
                <input class="c-field" name="mInput"
                placeholder="Middle Text Input"> 
            </div> 
            
            <button class="c-button c-button--brand"> 
                Right Button 
            </button> 
        </div> 
    </div> 
</body> 
</html> 