Blaze UI Input Group Rounded

Last Updated : 20 Apr, 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 be seeing Blaze UI Input Group rounded. There are three classes that are used to make an input group rounded. These classes are mentioned below.

Blaze UI Input Group Rounded Classes:

c-input-group–rounded: This class is used to make both ends of the input group rounded.
c-input-group–rounded-left: This class is used to make the left end of the input group rounded.
c-input-group–rounded-right: This class is used to make the right end of the input group rounded.

Syntax:

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

Example 1: The below example shows the use of the c-input-group–rounded class to make both ends of an input group rounded.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Input group Rounded | Blaze UI</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>Input Group Rounded - Blaze UI</h3> 
    </div> 
      
    <div class="u-window-box-xlarge"> 
        <h4>Text Inputs</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>Using Buttons</h4> 
        <div class="c-input-group c-input-group--rounded"> 
            <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>

Output:

Example 2: The below example uses the c-input-group–rounded-left and c-input-group–rounded-right classes, to make the left and the right ends rounded respectively.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0"> 
    <title>Input group Rounded | Blaze UI</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>Input Group Rounded - Blaze UI</h3> 
    </div>     
    <div class="u-window-box-xlarge"> 
        <h4>Left Rounded</h4> 
        <div class="c-input-group c-input-group--rounded-left"> 
            <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>Right Rounded</h4> 
        <div class="c-input-group c-input-group--rounded-right"> 
            <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>