Semantic-UI Form Group Inline Fields Variation

Last Updated : 07 Mar, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <title>Semantic-UI Form Group Inline Fields Variation</title> 
  <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
       rel="stylesheet"/> 
</head> 
<body> 
  
  <div class="ui container center aligned"> 
    <h2 style="color: green"> 
      GeeksforGeeks 
    </h2> 
    <h3> 
      Semantic-UI Form Group Inline Fields Variation 
    </h3> <br> 
  
    <div class="ui form"> 
      <div class="inline fields"> 
          
        <label> 
          Enter your Name 
        </label> 
  
        <div class="field"> 
          <input type="text"
                 placeholder="First Name"> 
        </div> 
  
        <div class="field"> 
          <input type="text"
                 placeholder="Middle Name"> 
        </div> 
  
        <div class="field"> 
          <input type="text"
                 placeholder="Last Name"> 
        </div> 
      </div> 
    </div> 
  </div> 
</body> 
</html>

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.

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <title>Semantic-UI Form Group Inline Fields Variation</title> 
  <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet"/> 
  <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
  </script> 
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
  </script> 
  
</head> 
  
<body> 
  
  <h2 style="color: green"> 
    GeeksforGeeks 
  </h2> 
  <h3> 
    Semantic-UI Form Group Inline Fields Variation 
  </h3> <br> 
  
  <div class="ui form"> 
    <div class="inline fields"> 
  
      <label> 
        Select any option 
      </label> 
  
      <div class="field"> 
        <div class="ui radio checkbox"> 
          <input type="radio" 
                 tabindex="0" 
                 name="gfg"
                 class="hidden"> 
          <label> 
            DSA 
          </label> 
        </div> 
      </div> 
      <div class="field"> 
        <div class="ui radio checkbox"> 
          <input type="radio" 
                 tabindex="0" 
                 name="gfg"
                 class="hidden"> 
          <label> 
            Coding 
          </label> 
        </div> 
      </div> 
  
      <div class="field"> 
        <div class="ui radio checkbox"> 
          <input type="radio" 
            tabindex="0" 
            name="gfg"
            class="hidden"> 
          <label> 
            Web development 
          </label>  
        </div> 
      </div> 
    </div> 
  </div> 
  <script> 
    $('.ui.checkbox').checkbox(); 
  </script> 
</body> 
</html>