Open In App

Semantic-UI Input Labeled Variation

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Semantic UI has a bunch of components for user interface design. One of them is “Inputs”. Inputs are used for various purposes on a web page. It is useful in taking information from the user in real-time and saving it in a database.  Depending on the requirements of the usage of inputs there are different variations of inputs. One of them is the labeled variation.

Semantic UI Input Labeled Variation is used to add a label to an input to depict extra information. Input may have a fixed prefix or suffix, this is when the labeled variation comes in handy. There might be extra info specific to some inputs which the user needs to know. Users can add different tags as labels for this purpose. 

Semantic UI Input Labeled Variation Class:

  • labeled: This class is used to specify labels to inputs.

Syntax:

<div class="ui labeled input">
 <div class="ui label">
   ....
 </div>
 <input type="text" placeholder="....">
</div>

Example 1: This example demonstrates the input label variation using the labeled class. You can see the output in the image below which shows different labeled inputs.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="ui container">
        <br/><br/>
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b><p>Semantic UI Input Labeled Variation</p></b>
        <hr><br/>
  
        <div class="ui labeled input">
            <div class="ui basic label">
                $
            </div>
            <input type="text"
                   placeholder="Enter amount..">
        </div>
        <br/><br/>
  
        <div class="ui right labeled input">
            <input type="text" 
                   placeholder="Enter length..">
            <div class="ui basic label">
                cm
            </div>
        </div>
        <br/><br/>
  
        <div class="ui right labeled left icon input">
            <i class="folder icon"></i>
            <input type="text"
                   placeholder="Create new account">
            <a class="ui tag label">
                New
            </a>
        </div>
        <br/><br/>
  
        <div class="ui right labeled input">   
            <input type="text"
                   placeholder="Enter your email">
            <a class="ui right corner label">
                <i class="mail icon"></i>
            </a>
        </div>
        <br/><br/>
    </div>
</body>
</html>


Output :

Semantic-UI Input Labeled Variation

Semantic-UI Input Labeled Variation

Example 2: This example demonstrates the input label variation using the labeled class. You can see the output in the image below which shows different states of input as labeled inputs.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="ui container">
        <br/><br/>
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b
<p>Semantic UI Input Labeled Variation</p>
 </b>
        <hr><br/>
  
        <div class="ui labeled focus input">
            <div class="ui label">
                Focus Input
            </div>
            <input type="text" 
                   placeholder="Enter your text">
        </div>
        <br/><br/>
  
        <div class="ui labeled error input">
            <div class="ui label">
                Error Input
            </div>
            <input type="text"
                   placeholder="Enter your text">
        </div>
        <br/><br/>
  
        <div class="ui labeled disabled input">
            <div class="ui label">
                Disabled Input
            </div>
            <input type="text"
                   placeholder="Enter your text">
        </div>
        <br/><br/>
  
        <div class="ui labeled transparent input">
            <div class="ui label">
                Transparent Input
            </div>
            <input type="text"
                   placeholder="Enter your text">
        </div>
        <br/><br/>
    </div>  
</body>
</html>


Output:

Semantic-UI Input Labeled Variation

Semantic-UI Input Labeled Variation

Reference: https://semantic-ui.com/elements/input.html#labeled



Last Updated : 08 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads