Angular Bootstrap Input Directive

Angular Input Directive - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap input directive can be used to apply material styles and animations to the inputs and textareas elements.

Basic example

Basic example with lifting-up input's label.

        
            
            <div class="md-form">
                <mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
                <input type="email" class="form-control" id="basicExample" mdbInput>
                <label for="basicExample">Type your email</label>
            </div>

Allowing focus on Checkboxes

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

        
            
          <mdb-checkbox mdbInput>You can focus me</mdb-checkbox>
          <mdb-checkbox mdbInput [focusCheckbox]="false">You can't focus me</mdb-checkbox>

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" mdbInput>
                <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" mdbInput>
                <label class="form-check-label" for="exampleRadios2">
                    You can't focus me
                </label>
            </div>

Angular Input Directive - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of input directive.

Modules used

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. 

        
            
          import { InputsModule, WavesModule } from 'ng-uikit-pro-standard';
        
        
    
        
            
          import { InputsModule, WavesModule } from 'angular-bootstrap-md';
Import example Modules list

Directives

mdbInput

Selector: mdbInput

Type: MdbInput

Inputs

Name Type Default Description Example
focusCheckbox boolean true Allow to move through checkboxes using tab key [focusCheckbox]="false"
focusRadio boolean true Alow to move through radio buttons using tab key [focusRadio]="false"
placeholder string - Label text for the input element [placeholder]="'Example placeholder'"