<form action="">
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Text Input</div>
        <div class="bzg_c" data-col="s12,m8,l8"><input class="form-input" type="text" name="text" placeholder="Text"></div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Full Width Input</div>
        <div class="bzg_c" data-col="s12,m8,l8"><input class="form-input form-input--block" type="text" name="fullwidth" placeholder="Full Width Input"></div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Password Input</div>
        <div class="bzg_c" data-col="s12,m8,l8"><input class="form-input" type="password" name="password" placeholder="Password"></div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Email Address</div>
        <div class="bzg_c" data-col="s12,m8,l8"><input class="form-input" type="email" name="email" placeholder="Email"></div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Number Input</div>
        <div class="bzg_c" data-col="s12,m8,l8"><input class="form-input" type="number" name="number" placeholder="Number"></div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Single File Input (Full Width)</div>
        <div class="bzg_c" data-col="s12,m8,l8">
            <input class="form-input js-file-input" id="singleFile" type="file" name="file">
            <label class="flex form-file-label" for="singleFile">
                <div class="js-file-name form-file-input form-input--block"> </div>
                <div class="btn--primary ml-4">Browse</div>
            </label>
        </div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Multiple File Input</div>
        <div class="bzg_c" data-col="s12,m8,l8">
            <input class="form-input js-file-input" id="multipleFile" type="file" name="file" multiple>
            <label class="flex form-file-label" for="multipleFile">
                    <div class="js-file-name form-file-input"> </div>
                    <div class="btn--primary ml-4">Browse</div>
            </label>
        </div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Textarea Input</div>
        <div class="bzg_c" data-col="s12,m8,l8"><textarea class="form-input" name="textarea" placeholder="Text Area"></textarea></div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Disabled Input</div>
        <div class="bzg_c" data-col="s12,m8,l8"><input class="form-input" type="text" name="disabled" placeholder="Disabled" disabled></div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Read-only Input</div>
        <div class="bzg_c" data-col="s12,m8,l8"><input class="form-input" type="text" name="readonly" placeholder="Read-only" readonly></div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Dropdown Select</div>
        <div class="bzg_c" data-col="s12,m8,l8">
            <select class="form-input" name="dropdown">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Radio Buttons</div>
        <div class="bzg_c" data-col="s12,m8,l8">
            <div class="form-check-group">
                <label class="form-check__item" for="rbOption1"><input id="rbOption1" type="radio" name="radio"> Option 1</label>
                <label class="form-check__item" for="rbOption2"><input id="rbOption2" type="radio" name="radio"> Option 2</label>
                <label class="form-check__item" for="rbOption3"><input id="rbOption3" type="radio" name="radio"> Option 3</label>
            </div>
        </div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c form-label" data-col="s12,m4,l4">Checkbox</div>
        <div class="bzg_c" data-col="s12,m8,l8">
            <div class="form-check-group">
                <label class="form-check__item" for="cbOption1"><input id="cbOption1" type="checkbox" name="checkbox" checked> Option 1</label>
                <label class="form-check__item" for="cbOption2"><input id="cbOption2" type="checkbox" name="checkbox"> Option 2</label>
                <label class="form-check__item" for="cbOption3"><input id="cbOption3" type="checkbox" name="checkbox" checked> Option 3</label>
            </div>
        </div>
    </div>
    <div class="bzg mb-12">
        <div class="bzg_c" data-col="s12,m8,l8" data-offset="m4,l4">
            <button class="btn btn--primary" type="submit">Submit</button>
            <button class="btn btn--ghost-secondary" type="reset">Cancel</button>
        </div>
    </div>
</form>

<form action="" class="js-validate">
<div class="bzg mb-12">
    <div class="bzg_c form-label" data-col="s12,m4,l4">Username</div>
    <div class="bzg_c" data-col="s12,m8,l8">
        <input class="form-input" type="text" name="username" placeholder="Username" required>
    </div>
</div>
<div class="bzg mb-12">
    <div class="bzg_c form-label" data-col="s12,m4,l4">Email</div>
    <div class="bzg_c" data-col="s12,m8,l8">
        <input class="form-input" type="email" name="email" placeholder="Email" required>
    </div>
</div>
<div class="bzg mb-12">
    <div class="bzg_c form-label" data-col="s12,m4,l4">Birthdate</div>
    <div class="bzg_c" data-col="s12,m8,l8">
        <input class="form-input datepicker-here js-date" type="text" name="birthdate" placeholder="Birthdate" required>
    </div>
</div>
<div class="bzg mb-12">
    <div class="bzg_c form-label" data-col="s12,m4,l4">Gender</div>
    <div class="bzg_c" data-col="s12,m8,l8">
        <div class="form-check-group">
            <label class="form-check__item" for="gender1"><input id="gender1" type="radio" name="gender" required> Male</label>
            <label class="form-check__item" for="gender2"><input id="gender2" type="radio" name="gender"> Female</label>
        </div>
    </div>
</div>
<div class="bzg mb-24">
    <div class="bzg_c form-label" data-col="s12,m4,l4">Hobbies</div>
    <div class="bzg_c" data-col="s12,m8,l8">
        <div class="form-check-group form-input--block">
            <label class="form-check__item" for="hobby1"><input id="hobby1" type="checkbox" name="hobby" required> Reading</label>
            <label class="form-check__item" for="hobby2"><input id="hobby2" type="checkbox" name="hobby"> Writing</label>
            <label class="form-check__item" for="hobby3"><input id="hobby3" type="checkbox" name="hobby"> Running</label>
            <label class="form-check__item" for="hobby4" data-invalid="Custom Error Message"><input id="hobby4" type="checkbox" name="hobby"> Swimming</label>
        </div>
    </div>
</div>
<div class="bzg mb-12">
    <div class="bzg_c" data-col="s12,m8,l8" data-offset="m4,l4">
        <button class="btn btn--primary" type="submit">Submit</button>
    </div>
</div>
</form>