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. It uses a class to add CSS to the elements.

A form is the section of a document that contains a number of input fields such as text field, password, checkbox, etc. Semantic-UI form is used to create attractive forms using semantic-UI classes. It is very easy to design attractive forms. 

The Semantic-UI Form Grouped Fields Variation is used to display the related choices of the element. It works similarly to the radio button.

Semantic-UI Form Grouped Fields Variation Used Class:

• grouped fields: This class is used to display the related choices of the elements.

Syntax:

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

Example 1: In this example, we will describe the use of Semantic-UI Form Grouped Fields Variation.

Output:

Semantic-UI Form Grouped Fields Variation

Example 2: In this example, we will describe the use of Semantic-UI Form Grouped Fields Variation with Inverted variation.

Output:

Semantic-UI Form Grouped Fields Variation

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