Blaze UI Text Input

Last Updated : 09 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.

In this article, we will be seeing Blaze UI Text Inputs. Text inputs are used on the webpages to take text type input from the uses. It is of two types: simple text input and textarea.

Blaze UI Text Input Classes:

c-field: This class is used on the text input to make its style consistent with other components.

Syntax:

Text Input:

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

Textarea:

<textarea class="c-field" placeholder="...."></textarea>

Example 1: The below example shows how to use text input and textarea inputs.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" 
       content="width=device-width, initial-scale=1.0"> 
    <title>Blaze UI - Text Input</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
    <style> 
        body { 
            font-family: sans-serif; 
        } 
    </style> 
</head> 
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;">GeeksforGeeks</h2> 
        <h3>Text Input - Blaze UI</h3> 
    </div> 
    <div class="u-window-box-super"> 
        <p><b>Text Input</b></p> 
        <input type="text" class="c-field" 
            placeholder="Text Input"> 
        <p><b>TextArea Input</b></p> 
        <textarea class="c-field" cols="30" rows="6" 
             placeholder="TextArea Input"> 
          </textarea> 
    </div> 
</body> 
</html>

Output:

Example 2: The example below shows the success, error, and disabled text input.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0"> 
    <title>Blaze UI - Text Input</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
    <style> 
        body { 
            font-family: sans-serif; 
        } 
        input.c-field{ 
            margin-top: 30px; 
        } 
    </style> 
</head> 
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;">GeeksforGeeks</h2> 
        <h3>Text Input - Color Variation - Blaze UI</h3> 
    </div> 
    <div class="u-window-box-super"> 
        <input type="text" class="c-field c-field--success" 
            placeholder="Success Text Input"> 
        <input type="text" class="c-field c-field--error" 
            placeholder="Error Text Input"> 
        <input type="text" class="c-field" 
            placeholder="Disabled Text Input" disabled> 
    </div> 
</body> 
</html>