Blaze UI Input Sizes

Last Updated : 06 May, 2022

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

Blaze UI Input Sizes are used to create the input fields with different sizes using the Blaze UI size classes. We can create the input field of extra-small size to super-large size as per our need.

Blaze UI Input Sizes Classes:

u-xsmall: This class is used to create the extra-small size input field.
u-small: This class is used to create the small size input field.
u-medium: This class is used to create the medium size input field.
u-large: This class is used to create the large size input field.
u-xlarge: This class is used to create the extra-large size input field.
u-super: This class is used to create a super large size input field.

Syntax:

<input class="c-field Input-Sizes-Class" 
       placeholder="..." type="text">

Example 1: The following code demonstrates the Blaze UI Input Sizes using u-xsmall, u-small, and u-medium classes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Input Sizes </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body class="u-window-box-large"> 
    <div class="u-centered "> 
        <h1 style="color: green;">  
            GeeksforGeeks  
        </h1> 
        <h3>  
            Blaze UI Input Sizes  
        </h3> 
  
        <input class="c-field u-xsmall" 
               placeholder="GFG Extra small size" 
               type="text" > 
        <br> 
  
        <input class="c-field u-small" 
               placeholder="GFG small size" 
               type="text" > 
        <br> 
  
        <input class="c-field u-medium" 
               placeholder="GFG Medium size" 
               type="text" > 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Input Sizes

Example 2: The following code demonstrates the Blaze UI Input Sizes using u-large, u-xlarge, and u-super classes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Input Sizes </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body class="u-window-box-large"> 
    <div class="u-centered "> 
        <h1 style="color: green;">  
            GeeksforGeeks  
        </h1> 
        <h3>  
            Blaze UI Input Sizes  
        </h3> 
  
        <input class="c-field u-large" 
               placeholder="GFG Large size" 
               type="text" > 
        <br> 
  
        <input class="c-field u-xlarge" 
               placeholder="GFG Extra Large size" 
               type="text" > 
        <br> 
  
        <input class="c-field u-super" 
               placeholder="GFG Super size" 
               type="text" > 
    </div> 
</body> 
  
</html>