Skip to content
Related Articles

Related Articles

Semantic-UI Input Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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=
</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 :  </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 :   </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 :   </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 :   </span>
        <div class="ui transparent input">
            <input type="text" placeholder="Enter name / email">
        </div>
        <br /><br />
        <div class="ui inverted segment">
             
<p>Inverted Variation :  </p>
 
 
            <div class="ui inverted input">
                <input type="text" placeholder="Enter your name here">
            </div>
        </div>
        <br /><br />
         
<p>Fluid Variation :   </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 :   </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:

Semantic-UI Input Variations

Semantic-UI Input Variations

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=
</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 :  </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 :   </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 :   </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 :   </span>
        <div class="ui transparent input">
            <input type="text" placeholder="Enter the amount">
        </div>
        <br /><br />
        <div class="ui inverted segment">
             
<p>Inverted Variation :  </p>
 
 
            <div class="ui inverted input">
                <input type="text" placeholder="Enter your message">
            </div>
        </div>
        <br /><br />
         
<p>Fluid Variation :   </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 :   </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>


Output:

Semantic-UI Input Variations

Semantic-UI Input Variations

Reference: https://semantic-ui.com/elements/input.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!