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.

Output :

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.

Output:

Semantic-UI Input Labeled Variation

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