Semantic-UI Dropdown Input Content Last Updated : 27 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. A Semantic UI Dropdown allows a user to select a value from a series of options. Semantic-UI Dropdown offers us 11 types of dropdown and 3types of content Header, divider, and icon. In this article, we will learn about Dropdown Input Content. This is used to create a dropdown menu that contains an input. Semantic-UI Dropdown Content Input Class: input: This class is used to add an input to the specified dropdown menu. Syntax: <div class="ui dropdown button"> <div class="input"> <input type="text" name="...." placeholder="..."> </div> </div> The below example illustrates the Semantic-UI Dropdown Input Content: Example 1: HTML <!DOCTYPE html> <html> <head> <title>Semantic-UI Dropdown Input Content</title> <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> <center> <div class="ui container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Semantic-UI Dropdown Input Content</h3> <div class="ui floating labeled icon dropdown button"> <i class="filter icon"></i> <span class="text">Filter</span> <div class="menu"> <div class="header"> Search Issues </div> <div class="ui left icon input"> <i class="search icon"></i> <input type="text" name="search" placeholder="Search..."> </div> <div class="header"> <i class="tags icon"></i> Filter by tag </div> <div class="divider"></div> <div class="item"> <div class="ui black empty circular label"> </div> GeeksforGeeks </div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script> </center> </body> </html> Output: Semantic-UI Dropdown Input Content Example 2: HTML <!DOCTYPE html> <html> <head> <title>Semantic-UI Dropdown Input Content</title> <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> <center> <div class="ui container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Semantic-UI Dropdown Input Content</h3> <div class="ui floating labeled icon dropdown button"> <i class="filter icon"></i> <span class="text">Filter</span> <div class="menu"> <div class="header"> Search Issues </div> <div class="ui left icon input"> <i class="search icon"></i> <input type="text" name="search" placeholder="Search..."> </div> <div class="header"> <i class="tags icon"></i> Filter by tag </div> <div class="divider"></div> <div class="item"> <div class="ui red empty circular label"> </div> Urgent </div> <div class="item"> <div class="ui green empty circular label"> </div> Safe </div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script> </center> </body> </html> Output: Semantic-UI Dropdown Input Content Reference: https://semantic-ui.com/modules/dropdown.html#input Comment More infoAdvertise with us Next Article Semantic-UI Dropdown Image Content K Kanchan_Ray Follow Improve Article Tags : Web Technologies CSS Semantic-UI Semantic-UI Modules Similar Reads Semantic-UI Dropdown Icon Content 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 Content Semantic UI is an open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive 6 min read Semantic-UI Menu Dropdown Item Content Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts. Semantic UI Menu is a group of elements th 2 min read Semantic-UI Dropdown Image Content 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 Form Dropdown Content Semantic UI is an open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive 2 min read Semantic-UI Dropdown Floated Content Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create 2 min read Like