Semantic-UI Input Fluid Variation

Last Updated : 25 Feb, 2022

Semantic UI framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. This framework allows us to use various of its styles and properties to make a website more user-friendly.

The input fluid is used to take the input from the user, this input variation takes the size of the outer container, it will adjust according to the size of the container.

Semantic UI Input Fluid Variation Class:

fluid: This class is used to create fluid input.

Syntax:

<div class="ui fluid input">
    <input type="text" .../>
         ...
</div>

Example 1: The following code demonstrates the input fluid using the Semantic UI framework. This input variation takes the size of the outer container, it will adjust according to the size of the container.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
  
    <style> 
        body { 
            margin-left: 10px; 
            margin-right: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <br /> 
    <h1 class="ui header green"> 
        GeeksforGeeks 
    </h1> 
      
    <div class="ui fluid input"> 
        <input type="text" placeholder="Search here"> 
        <div class="ui green button"> 
            Search 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

Semantic-UI Input Fluid Variation

Example 2: The following code demonstrates to create input fluid with an icon instead of a button using the Semantic UI framework. This input variation takes the size of the outer container, it will adjust according to the size of the container.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
  
    <style> 
        body { 
            margin-left: 10px; 
            margin-right: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 class="ui header green"> 
        GeeksforGeeks 
    </h1> 
    <div class="ui fluid icon input"> 
        <input type="text" placeholder="Search here"> 
        <i class="search icon"></i> 
    </div> 
</body> 
  
</html> 