Semantic-UI Input Variations

Last Updated : 22 Apr, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI has a bunch of components for user interface design. One of them is “Inputs”. Inputs are used for various purposes on a web page. It is useful in taking information from the user in real-time and saving it in a database. The user might need to show different inputs in different variations according to his requirements. To depict an input data significance, its variation can vary.

Semantic UI Input Variations:

icon: This variation is used to specify icons to inputs.
labeled: This variation is used to specify labels to inputs.
action: This variation is used to relate input with an action button.
transparent: This variation is used to specify the transparent variation of inputs.
inverted: This variation is used to make the input inverted (color-wise).
fluid: This variation is used to make input take the full size of its container.
size: This variation is used to make input vary in size.

Example 1: The following code also demonstrates the above input variations.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic-UI Input Variations</title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>

<body>
    <div class="ui container">
        <br/><br/>
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>  
         
<p>Semantic UI Input Variations</p>

        </b>
        <hr><br />
        <span>Icon Variation :&nbsp;&nbsp;</span>
        <div class="ui icon input">
            <input type="text" placeholder="Enter name to search...">
            <i class="search icon"></i>
        </div>
        <br /><br />
        <span>Labeled Variation : &nbsp;&nbsp;</span>
        <div class="ui right labeled left icon input">
            <i class="folder icon"></i>
            <input type="text" placeholder="Create new account">
            <a class="ui tag label">
                New
            </a>
        </div>
        <br /><br />
        <span>Action Variation : &nbsp;&nbsp;</span>
        <div class="ui action input">
            <input type="text" id="input" placeholder="Enter your message">
            <button class="ui teal button">
                Click
            </button>
        </div>
        <br /><br />
        <span>Transparent Variation : &nbsp;&nbsp;</span>
        <div class="ui transparent input">
            <input type="text" placeholder="Enter name / email">
        </div>
        <br /><br />
        <div class="ui inverted segment">
            
<p>Inverted Variation : &nbsp;</p>


            <div class="ui inverted input">
                <input type="text" placeholder="Enter your name here">
            </div>
        </div>
        <br /><br />
        
<p>Fluid Variation : &nbsp;&nbsp;</p>


        <div class="ui fluid icon input">
            <input type="text" placeholder="Enter name to search...">
            <i class="search icon"></i>
        </div>
        <br /><br />
        
<p>Size Variation : &nbsp;&nbsp;</p>


        <div class="ui mini input">
            <input type="text" value="Mini" />
        </div>
        <div class="ui small input">
            <input type="text" value="Small " />
        </div>
        <div class="ui large input">
            <input type="text" value="Large " />
        </div>
        <br /><br />
    </div>
</body>

</html>

Output:

Example 2: The following code also demonstrates some other input variations.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic-UI Input Variations</title>
    <link rel="stylesheet"
     href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>

<body>
    <div class="ui container">
        <br /><br />
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b> 
          
<p>Semantic UI Input Variations</p>

        </b>
        <hr><br />
        <span>Icon Variation :&nbsp;&nbsp;</span>
        <div class="ui icon input">
            <input type="text" placeholder="Enter email to login . ">
            <i class="mail icon"></i>
        </div>
        <br /><br />
        <span>Labeled Variation : &nbsp;&nbsp;</span>
        <div class="ui right labeled input">
            <input type="text" 
                   placeholder="Enter length..">
            <div class="ui basic label">
                cm
            </div>
        </div>
        <br /><br />
        <span>Action Variation : &nbsp;&nbsp;</span>
        <div class="ui action input">
            <input type="text" id="input">
            <button  class="ui teal right labeled icon button">
                <i class="copy icon"></i>
                Click to Copy
            </button>
        </div>
        <br /><br />
        <span>Transparent Variation : &nbsp;&nbsp;</span>
        <div class="ui transparent input">
            <input type="text" placeholder="Enter the amount">
        </div>
        <br /><br />
        <div class="ui inverted segment">
            
<p>Inverted Variation : &nbsp;</p>


            <div class="ui inverted input">
                <input type="text" placeholder="Enter your message">
            </div>
        </div>
        <br /><br />
        
<p>Fluid Variation : &nbsp;&nbsp;</p>


        <div class="ui fluid icon input">
            <input type="text" placeholder="Enter Email to Login . ">
            <i class="mail icon"></i>
        </div>
        <br /><br />
        
<p>Size Variation : &nbsp;&nbsp;</p>


        <div class="ui big input">
            <input type="text" value="Big" />
        </div>
        <div class="ui huge input">
            <input type="text" value="Huge " />
        </div>
        <br/><br/>
    </div>
</body>
</html>