Component Listing

INPUT

This component is generally used to take inputs from the user. You can change the type attribute in the input tag to take different types of input namely text, number, email, password, etc. from the user.
To use these input elements in your project import the below stylesheet.


@import url("https://oxygen-ui-component-library.netlify.app/components/input/input.css")

Input Text Box

This component is used to take text input from the user.

Name


<div class="input">
    <input class="input-text" type="text" />
    <div class="placeholder">Name</div>
</div>

Validation Text Box

There are 3 validations available apart from default namely success, warning and error.

Name


<div class="input">
    <input class="input-text input-success" type="text" />
    <div class="placeholder success">Name</div>
</div>
<div class="input">
    <input class="input-text input-error" type="text" />
    <div class="placeholder errror">Name</div>
</div>
<div class="input">
    <input class="input-text input-warn" type="text" />
    <div class="placeholder warn">Name</div>
</div>