Blaze UI Input Hints

Last Updated : 21 Apr, 2022

Blaze UI is an open-source CSS framework. It is a lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it. In this article, we will discuss Blaze UI Input Hints.

Blaze UI Input Hints are used to give the hints to the user to fill in the given input field. To give hints, we use the .c-hint class. If the user wants to see the hints, all the time then we can use the .c-hint–static class to show the hint always.

Blaze UI Input Hints Class:

c-hint: This class is used to give hints to the user.
c-hint–static: This class is used to show the hint permanently all time.

Syntax:

<label class="c-label">
  <input class="c-field c-field--label">
  <div role="tooltip" class="c-hint">
       ...
  </div>
</label>

Example 1: The following code demonstrates the use of Blaze UI Input Hints using the c-hint class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> Blaze UI Input Hints </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered "> 
      <h1 style="color: green;"> GeeksforGeeks </h1> 
      <h3> Blaze UI Input Hints </h3> 
  
      <label class="o-container o-container--xsmall  
        c-label"> 
        Enter username or email: 
        <input class="c-field c-field--label"> 
        <div role="tooltip" class="c-hint"> 
          Log in with username or email 
        </div> 
      </label> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Input Hints

Example 2: The following code demonstrates the Blaze UI Input Hints using the c-hint–static class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> Blaze UI Input Hints </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered "> 
      <h1 style="color: green;"> GeeksforGeeks </h1> 
      <h3> Blaze UI Input Hints </h3> 
  
      <label class="o-container o-container--xsmall  
        c-label"> 
        <b> Enter username or email: </b> 
        <input class="c-field c-field--label"> 
        <div role="tooltip" class="c-hint--static"> 
            Log in with username or email 
        </div> 
      </label> 
    </div> 
</body> 
  
</html>