Textfields

Filled Input

<div class="textbox">
    <div class="left">
    </div>
    <div class="middle">
        <label for="aaaa" class="label">Label</label>
        <input type="text" id="aaaa" class="input">
    </div>
    <div class="right"></div>
</div>

Outlined Input

<div class="textbox outlined">
    <div class="left">
    </div>
    <div class="middle">
        <label for="aaaa" class="label">Label</label>
        <input type="text" id="aaaa" class="input">
    </div>
    <div class="right"></div>
</div>

Border bottom input

<div class="textbox border-bottom">
    <div class="left">
    </div>
    <div class="middle">
        <label for="aaaa" class="label">Label</label>
        <input type="text" id="aaaa" class="input">
    </div>
    <div class="right"></div>
</div>

Input with icons

<div class="textbox">
    <div class="left">
        <i class="mdi mdi-heart"></i>
    </div>
    <div class="middle">
        <label for="a4" class="label">Label</label>
        <input type="text" id="a4" class="input">
    </div>
    <div class="right">
        <i class="mdi mdi-heart"></i>
    </div>
</div>

Textarea

<div class="textbox textarea">
    <div class="left">
    </div>
    <div class="middle">
        <label for="te" class="label">Label</label>
        <textarea id="te" cols="30" rows="10" class="input"></textarea>
    </div>
    <div class="right"></div>
</div>