Semantic UI is the 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 Multiple Select Content is used to select the multiple options using a single form field. If we want to delete the selected options then delete them using the close icon. We can also search any option using the input form field.
In this article, we will discuss the Semantic UI Form Multiple Select Content.
Semantic UI Form Multiple Select Content class:
- dropdown: It is used to create the dropdown to select the multiple options. To select multiple options, use the “multiple” attribute to the same element.
Syntax:
<div class="ui form">
<div class="field">
<label>Country</label>
<select multiple="" class="ui dropdown">
...
</select>
</div>
</div>Example 1: The following code demonstrates the Semantic-UI Form Multiple Select Content.
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet"/>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui header green"> GeeksforGeeks</h2>
<h3> Semantic-UI Form Multiple Select Content </h3>
</div>
<div class="ui form">
<div class="field">
<label>
Skills
</label>
<select multiple="" class="ui dropdown">
<option value="">
Select Multiple skills:
</option>
<option value="cpp">
C++
</option>
<option value="dart">
Dart
</option>
<option value="firebase">
Firebase
</option>
<option value="flutter">
Flutter
</option>
<option value="java">
Java
</option>
<option value="python">
Python
</option>
<option value="web-dev">
Web Development
</option>
</select>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Semantic-UI Form Multiple Select Content with search selection dropdown.
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet"/>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui header green"> GeeksforGeeks </h2>
<h3> Semantic-UI Form Multiple Select Content </h3>
</div>
<div class="ui form">
<div class="field">
<label>
Skills
</label>
<select multiple="" class="ui search selection dropdown">
<option value="">
Select Multiple skills:
</option>
<option value="cpp">
C++
</option>
<option value="css">
CSS
</option>
<option value="dart">
Dart
</option>
<option value="firebase">
Firebase
</option>
<option value="flutter">
Flutter
</option>
<option value="java">
Java
</option>
<option value="Javascript">
Javascript
</option>
<option value="python">
Python
</option>
<option value="web-dev">
Web Development
</option>
</select>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/collections/form.html#multiple-select