Skip to content
Related Articles

Related Articles

Blaze UI Input Sizes

View Discussion
Improve Article
Save Article
  • Last Updated : 06 May, 2022
View Discussion
Improve Article
Save Article

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=
</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=
</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>


Output:

Blaze UI Input Sizes

Reference: https://www.blazeui.com/components/inputs/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!