Open In App

Onsen UI Text Input CSS Components

Improve
Improve
Like Article
Like
Save
Share
Report

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. In this article, we will learn about how to include text input using Onsen UI.

Text Input provides an input field of text type where the user can provide text.

Onsen UI Text Input CSS Components Classes:

  • Basic Text: This component contains the class that is utilized to create an input of text type.
  • Underbar Text Input: This component contains the class that is used to create an input with the style of the underbar.
  • Material Input: This component contains the class that is used to create a simple text input.

Syntax:

<div class="Text Input Components Class">
     ...
</div>

Example 1: In this example, we will make use of the above classes to demonstrate the use of text input.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
       <h2>
             Onsen UI Text Input CSS Components
       </h2>
        <div>
            <input type="text" 
                   class="text-input" 
                   placeholder="text" 
                   value="">
        </div>
    </center>
</body>
</html>


Output:

 

Example 2: In this example, we will make use of the above classes to demonstrate the use of text input.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>
              Onsen UI Text Input CSS Components
         </h3>
        <div>
            <input type="text" 
                   class="text-input text-input--underbar" 
                   placeholder="text" 
                   value="">
        </div>
     </center>
</body>
</html>


Output:

 

Reference: https://onsen.io/v2/api/css.html#text-input-category



Last Updated : 30 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads