mdbInputDirective

mdbInputDirective gives ability to lift up input label, validate input via it's type and adds focus to checkboxes / radio elements.

Basic example

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

Type your 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.

Type your email


<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="form-check-input 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>

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Input Directive:

// MDB Angular Pro
import { InputsModule, WavesModule } from 'ng-uikit-pro-standard'

// MDB Angular Free
import { InputsModule, WavesModule } from 'angular-bootstrap-md'

Import example Modules list