Semantic-UI Dropdown Error State

Last Updated : 15 Feb, 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 “Dropdown”. Dropdowns are used to show different options to users to choose from. Users can select among them as per their choice. Depending on the requirements of the usage of dropdowns there are different states of dropdowns. One of them is the error state.

Semantic UI Dropdown Error State: The user might need to show a checkbox as default error according to his requirements. There might be a flow of wrong data in dropdown options which the user needs to know. This is when the error state comes in handy.

Syntax:

<div class="ui dropdown error">
 Dropdown <i class="dropdown icon"></i>
 <div class="menu">
   <div class="item">...</div>
   ...
 </div>
</div>

Example: This example demonstrates the dropdown error state using the error class. Error class is used to specify this state of the dropdown. You can see that the dropdown is shown in red color in the output below. Also, the options are red by default. This depicts something is wrong with this dropdown and alerts the user regarding it.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    rel="stylesheet" /> 
    <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 container"> 
        <br /><br /> 
        <h2 class="ui header green">GeeksforGeeks</h2> 
        <b> 
            <p>Semantic UI Dropdown error State</p> 
        </b> 
        <hr> 
        <br /> 
        <strong>Dropdown with error option:</strong> 
        <br /><br /> 
  
        <div class="ui error dropdown"> 
            Error Dropdown <i class="dropdown icon"></i> 
            <div class="menu"> 
                <div class="item">Error option 1</div> 
                <div class="item">Error option 2</div> 
                <div class="item">Error option 3</div> 
                <div class="item">Error option 4</div> 
            </div> 
        </div> 
    </div> 
      
    <script> 
        $('.ui.dropdown').dropdown(); 
    </script> 
</body> 
  
</html> 