Blaze UI Input Sizes

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@12.2.0/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:

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@12.2.0/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>

Output:

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

Explore