mdbInputDirective

Basic example

Basic example with lifting-up input's label and validating through email.

<div class="md-form">
    <i class="fa fa-envelope prefix"></i>
    <input type="email" class="form-control" id="basicExample" mdbInputDirective>
    <label for="basicExample">Type your email</label>
</div>
        

Turn off validate

Basic example with lifting-up input's label and turned off validation.

<div class="md-form">
    <i class="fa fa-envelope prefix"></i>
    <input type="email" class="form-control" id="basicExample" [mdbValidate]="false" mdbInputDirective>
    <label for="basicExample">Type your email</label>
</div>
        

Allowing focus on Checkboxes

Example with allowing to move through checkboxes using focus (TAB key).

<div class="form-check">
    <input class="form-check-input" mdbInputDirective type="checkbox" id="checkbox1">
    <label class="form-check-label" for="checkbox1">You can focus me</label>
</div>

<div class="form-check">
    <input class="form-check-input" mdbInputDirective [focusCheckbox]="false" type="checkbox" class="filled-in" id="checkbox2">
    <label class="form-check-label" for="checkbox2">You can't focus me</label>
</div>
        

Allowing focus on Radio

Example with allowing to move through Radio using focus - TAB key to activate, and arrow up / down to move.

<div class="form-check mb-4">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" mdbInputDirective>
    <label class="form-check-label" for="exampleRadios1">
        You can focus me
    </label>
</div>

<div class="form-check mb-4">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" [focusRadio]="false"
        mdbInputDirective>
    <label class="form-check-label" for="exampleRadios2">
        You can't focus me
    </label>
</div>