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 Group Inline Fields Variation is used to inline the multiple fields in a single row. We can inline multiple fields in a single row by using the “inline fields” class.

In this article, we will discuss Form Group Inline Fields Variation in Semantic-UI.

Semantic-UI Form Group Inline Fields Variation Class:

• inline fields: It is used to inline multiple fields in a single row.

Syntax:

<div class="ui form">
  <div class="inline fields">
     ......
  </div>
</div>

Example 1: The following code demonstrates the Semantic-UI Form Group Inline Fields Variation.

Output:

Semantic-UI Form Group Inline Fields Variation

Example 2: The following code demonstrates the Semantic-UI Form Group Inline Fields Variation using radio buttons.

Output:

Semantic-UI Form Group Inline Fields Variation

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