Semantic-UI Search States

Last Updated : 5 Aug, 2025

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. It uses a class to add CSS to the elements.

Search bar allows us to search for content in a website. It is an essential part of a website, which increases the ease of finding the desired item. Semantic UI provides us with a styled search bar. Let's have a look at Semantic UI Search States.

Semantic UI Search States:

  • loading: A Search Bar can be kept in a loading state until the search results are fetched from an external source or from the local content.

Semantic UI Loading Class:

  • loading: This class keeps the search bar in a loading state.

Syntax:

<div class="ui loading search">
    <div class="ui icon input">
        <input type="text">
        <i class="search icon"></i>
    </div>
</div>

Example 1: In the below example, we have created a search bar with loading state.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"  />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body>
    <div class="ui dimmed pusher container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Search States</h4>
        <hr>
        <br />
        <div class="ui loading search">
            <div class="ui icon input">
                <input type="text"
                       placeholder="Find in GeeksforGeeks">
                <i class="search icon"></i>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Search bar with loading state

Example 2: In the below example, we have created a disable search with loading state

HTML 
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body>
    <div class="ui dimmed pusher container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Search States</h4>
        <hr>
        <br />
        <div class="ui loading disabled search">
            <div class="ui icon input">
                <input class="prompt" type="text"
                       placeholder="Find in GeeksforGeeks">
                <i class="search icon"></i>
            </div>
            <div class="results"></div>
        </div>
    </div>
</body>

</html>

Output:

Disabled search with loading state

Reference: https://semantic-ui.com/modules/search.html#loading

Comment

Explore