Semantic-UI | Input Field

Last Updated : 20 May, 2020

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Semantic-UI classes can be applied to the Input field to modify and design them as needed.

Example 1: Simple Input Field

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Semantic UI</title> 
        <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
              rel="stylesheet" /> 
    </head> 
    <body> 
        <div class="ui container"> 
            <h2>Simple Text Input Field</h2> 
            <div class="ui input"> 
                <input type="text" placeholder="Enter Name"> 
            </div> 
        </div> 
  
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
      </script> 
    </body> 
</html> 

Output:

Example 2: Input Field showing data Loading

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Semantic UI</title> 
        <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
              rel="stylesheet" /> 
    </head> 
  
    <body> 
        <div class="ui container"> 
            <h2>Text Field with Loading Icon</h2> 
            <div class="ui icon input loading"> 
                <input type="text" placeholder="Enter School"> 
                <i class="search icon"></i> 
            </div> 
        </div> 
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
      </script> 
    </body> 
</html> 

Output:

And you can add class ‘ui left icon input loading’ to show that loading icon in the left.

Example 3: Action Input Field

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Semantic UI</title> 
        <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
              rel="stylesheet" /> 
    </head> 
  
    <body> 
        <div class="ui container"> 
            <h2>Text Field With Button</h2> 
            <div class="ui action input"> 
                <input type="text" placeholder="Search"> 
                <button class="ui button">Search</button> 
            </div> 
        </div> 
        <br> 
        <div class="ui container"> 
            <h2>Text field with dropdown list and Button</h2> 
            <div class="ui action input"> 
                <input type="text" placeholder="Search..."> 
                <select class="ui compact selection dropdown"> 
                  <option value="web">Web</option> 
                  <option selected="" value="images">Images</option> 
                  <option value="videos">Videos</option> 
                </select> 
                <div class="ui button">Search</div> 
            </div> 
        </div> 
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
      </script> 
    </body> 
</html> 

Output:

Example 4: Labelled Input File

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Semantic UI</title> 
        <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
              rel="stylesheet" /> 
    </head> 
  
    <body> 
        <div class="ui container"> 
            <h2>Labelled in front.</h2> 
            <div class="ui labeled input"> 
                <div class="ui label"> 
                    https:// 
                </div> 
                <input type="text" 
                       placeholder="geeksforgeeks.com"> 
            </div> 
        </div> 
        <br> 
        <div class="ui container"> 
            <h2>Labelled in the end.</h2> 
            <div class="ui right labeled input"> 
                <input type="text" placeholder="Find domain"> 
                <div class="ui dropdown label"> 
                  <div class="text">.com</div> 
                </div> 
            </div> 
        </div> 
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
      </script> 
    </body> 
</html> 

Output:

Semantic-UI Input Fluid Variation

iamsahil1910

Improve

Article Tags :

Semantic-UI | Input Field

HTML

HTML

HTML

HTML

Similar Reads

Thank You!

What kind of Experience do you want to share?