Input

Inputs are used to get information from the user. Keyboard and mouse can be used for providing or changing data. In order to only use the Input Component from Cascade UI in your project, copy and paste the below code in the head tag of your html document.

                
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/css/foundation.css" />
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/Input/input.css" />

Primary Input

Primary Inputs include textarea input, text input, number input and password input. These can be used by applying the class name input-primary to the parent container. You can copy the html part from below code snippet.

Textarea *

Username *

Number *

Password *

                
                    <div class="input-primary">
                        <label>Textarea *</label>
                        <textarea row="4" col="10" placeholder="Write something here..."></textarea>
                    </div>
                    <div class="input-primary">
                        <label>Username *</label>
                        <input type="name" placeholder="Enter username">
                    </div>
                    <div class="input-primary">
                        <label>Number *</label>
                        <input type="number" placeholder="Enter number">
                    </div>
                    <div class="input-primary">
                        <label>Password *</label>
                        <input type="password" placeholder="Enter password">
                    </div>

Input validation

Validation is done while user enters the input. This can be implemented by applying the class name input-validation. You can copy the html part from below code snippet.

                        
                        <form action="" class="input-validation" novalidate>
                            <label for="username">Username *</label>
                            <input type="text" placeholder="Enter Username" required />
    
                            <label for="email-input">Email *</label>
                            <input type="email" placeholder="Enter Email" required />
    
                            <label for="password">Password *</label>
                            <input type="password" class="error-psw" placeholder="Enter Password" required />
                            <div class="error-msg">Password must be atleast 8 characters long!</div>
                        </form>