Skip to content
Related Articles

Related Articles

Semantic-UI Form Dropdown Content

Improve Article
Save Article
  • Last Updated : 10 Mar, 2022
Improve Article
Save Article

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 website.

The form is a container that has different types of input elements such as text fields, submit buttons, radio buttons, checkboxes, etc.

Semantic-UI Form is used to create the beautiful form using form classes. Form Dropdown Content is used to create a list of items and we can select an option from the series of options. We can also search any dropdown item using the input text field. We will use the dropdown class to create the dropdown.

In this article, we will discuss the Form Dropdown Content in Semantic-UI.

Semantic-UI Form Dropdown Content Class:

  • dropdown: This class is used to create the dropdown with some items.

Syntax:

<div class="ui form">
  <div class="field">
      <label>....</label>
      <div class="ui selection dropdown">
          ......
      </div>
  </div>
</div>

Example 1:  The following code demonstrates the Semantic-UI Form Dropdown Content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Form Dropdown Content</title>
    <link href=
          rel="stylesheet" />
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color: green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Form Dropdown Content</h3>
    </div>
  
    <div class="ui form">
        <div class="field">
            <label>Dropdown</label>
  
            <div class="ui selection dropdown">
                <input type="hidden" name="drop">
                <i class="dropdown icon"></i>
  
                <div class="default text">
                    Select from dropdown
                </div>
  
                <div class="menu">
                    <div class="item" data-value="0">
                        Coding
                    </div>
  
                    <div class="item" data-value="1">
                        DSA
                    </div>
  
                    <div class="item" data-value="2">
                        App development
                    </div>
  
                    <div class="item" data-value="3">
                        Web development
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
  
</html>


Output:

Semantic-UI Form Dropdown Content

Semantic-UI Form Dropdown Content

Example 2: The following code demonstrates the Semantic-UI Form Dropdown Content by searching a dropdown item.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Form Dropdown Content</title>
    <link href=
         rel="stylesheet" />
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color: green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Form Dropdown Content</h3>
    </div>
  
    <div class="ui form">
        <div class="field">
            <label>Dropdown</label>
  
            <select class="ui search dropdown">
                <option value="">
                    Select option
                </option>
  
                <option value="html">
                    HTML
                </option>
  
                <option value="bootstrap">
                    Bootstrap
                </option>
  
                <option value="css">
                    CSS
                </option>
  
                <option value="js">
                    Javascript
                </option>
  
                <option value="nodejs">
                    Node.js
                </option>
            </select>
        </div>
    </div>
  
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
  
</html>


Output:

Semantic-UI Form Dropdown Content

Semantic-UI Form Dropdown Content

Reference: https://semantic-ui.com/collections/form.html#dropdown


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!