×

Input

Input elements are used in Forms. Depending on type of input, the ability to style it varies. You should always use a label for your input elements for accessibility reasons.

Examples

Full Width Input

                   
<div>
    <div class="input-container">
        <input type="text" id="email" class="input-outlined input-outlined-red" autocomplete="off"
            placeholder=" " />
        <label style="background-color: white;" for="email" class="input-label ">Email</label>
    </div>
</div>


<div>
    <div class="input-container">
        <input type="text" id="email" class="input-outlined input-outlined-pink" autocomplete="off"
            placeholder=" " />
        <label style="background-color: white;" for="email" class="input-label ">Email</label>
    </div>
</div>

Input with 24rem width

                   

<div class="w-96">
    <div class="input-container">
        <input type="text" id="email" required
            class="input-outlined text-lg text-black input-outlined-rose" autocomplete="off"
            placeholder=" "></input>

        <label style="background-color: white;" for="email" class="input-label text-grey-700">Email
            *
        </label>

        <small class="error  text-red-500 text-sm">Error Message</small>
    </div>
</div>

Input with validation message

Error Message 
                   
<div class="w-96">
    <div class="input-container">
        <input type="text" id="email" required
            class="input-outlined text-lg text-black input-outlined-rose" autocomplete="off"
            placeholder=" "></input>

        <label style="background-color: white;" for="email" class="input-label text-grey-700">Email
            *
        </label>

        <small class="error  text-red-500 text-sm">Error Message</small>
    </div>
</div>
Image Lists