Semantic-UI Dropdown Error State Last Updated : 15 Feb, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> Output: Error Dropdown Reference: https://semantic-ui.com/modules/dropdown.html#error Comment More infoAdvertise with us Next Article Semantic-UI Search Dropdown Type N namankedia Follow Improve Article Tags : Web Technologies CSS Semantic-UI Semantic-UI Modules Similar Reads Semantic-UI Dropdown States 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 dropdown allows a user to select a value from a series of options. Semant 3 min read Semantic-UI Dropdown Loading State 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. A Semantic UI Dropdown allows a user to select a value from a series of options. Sema 2 min read Semantic-UI Search Dropdown Type Semantic-UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like boots 2 min read Semantic-UI Dropdown Active State 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 dropdown allows a user to select a value from a series of options. Semant 2 min read Semantic-UI Dropdown Disabled State 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 “Drop 3 min read Semantic-UI Dropdown Selection Type Semantic-UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like boots 2 min read Like