Semantic-UI Form Multiple Select Content

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.

Output:

👁 Image

Example 2: The following code demonstrates the Semantic-UI Form Multiple Select Content with search selection dropdown.

Output:

👁 Image

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