Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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=
              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=
      </script>
    </body>
</html>

Output: 
 

Example 2: Input Field showing data Loading



HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              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=
      </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=
              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=
      </script>
    </body>
</html>

Output:
 

Example 4: Labelled Input File

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              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=
      </script>
    </body>
</html>

Output:
 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!