Angular Bootstrap Inputs

Angular Inputs - 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 inputs are special types of fields that are used in order to receive data from the user. Used mostly in a variety of web-based forms.

All of them are created in our beautiful, material design style.

MDB Angular supports the following types of inputs: button, checkbox, email, file, hidden, number, password, radio, range, reset, search, submit, tel, text, and textarea.


Examples

Input field

        
            
          <div class="md-form">
            <input mdbInput type="text" id="form1" class="form-control">
            <label for="form1" class="">Example label</label>
          </div>
        
        
    

Two-way data binding

Look at me:

        
            
          <div class="md-form">
            <input mdbInput type="text" name="text" [(ngModel)]="text" id="form1" class="form-control">
            <label for="form1" class="">Example label</label>
            <p>Look at me! {{text}}</p>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'two-way-component',
            templateUrl: './two-way.component.html',
            styleUrls: ['./two-way.component.scss']
          })
          export class TwoWayComponent {
            text = '';
          }
        
        
    

Small input

        
            
          <div class="md-form form-sm">
            <input mdbInput type="text" id="form1" class="form-control form-control-sm">
            <label for="form1" class="">Example label</label>
          </div>
        
        
    

Icon Prefixes

        
            
          <div class="md-form">
            <mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
            <input mdbInput type="text" id="form2" class="form-control">
            <label for="form2">Example label</label>
          </div>
        
        
    

Placeholder

        
            
          <div class="md-form">
            <input mdbInput placeholder="Placeholder" type="text" id="form58" class="form-control">
            <label for="form58">Example label</label>
          </div>
        
        
    

Prefilling Text Inputs

        
            
          <div class="md-form">
            <input value="John Doe" type="text" id="form6" class="form-control" mdbInput>
            <label for="form6">Example label</label>
          </div>
        
        
    

Error or Success Messages

Note that minLength, maxLength defines the minimum and maximum input length. Also data-error, data-success provides space to enter your custom error or success message.

We can now use [errorMessage] and [successMessage] inputs to add custom messages as strings or to pass variables defined in your typescript file. Those inputs will only work when data-error and data-success attributes are not available.

If you do not want to use validation, use [mdbValidation]="false" on the input element, which should not display the validation status. You can use [validateSuccess]="false" or [validateError]="false" to disable only one type of message.

        
            
          <form [formGroup]="validationForm">
            <div class="md-form">
              <mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
              <input mdbInput mdbValidate formControlName="emailFormEx" minLength="8" maxLength="25" type="email"
                     class="form-control" id="form9">
              <label for="form9">Type your e-mail</label>
              <mdb-error *ngIf="emailFormEx.invalid && (emailFormEx.dirty || emailFormEx.touched)">Input invalid</mdb-error>
              <mdb-success *ngIf="emailFormEx.valid && (emailFormEx.dirty || emailFormEx.touched)">Input valid</mdb-success>
            </div>
            <div class="md-form">
              <mdb-icon fas icon="lock" class="prefix"></mdb-icon>
              <input mdbInput mdbValidate formControlName="passwordFormEx" minLength="10" maxLength="25" type="password"
                     class="form-control" id="form10">
              <label for="form10">Type your password</label>
              <mdb-error *ngIf="passwordFormEx.invalid && (passwordFormEx.dirty || passwordFormEx.touched)">Input invalid
              </mdb-error>
              <mdb-success *ngIf="passwordFormEx.valid && (passwordFormEx.dirty || passwordFormEx.touched)">Input valid
              </mdb-success>
            </div>
          </form>
        
        
    
        
            
          import { FormControl, Validators, FormBuilder } from '@angular/forms';
          import { Component } from '@angular/core';

          @Component({
            selector: 'error-success-message',
            templateUrl: './error-success-message.component.html',
            styleUrls: ['./error-success-message.component.scss'],
          })
          export class ErrorSuccessMessageComponent {
            validationForm: FormGroup;

            constructor(public fb: FormBuilder) {
              this.validationForm = fb.group({
                emailFormEx: [null, [Validators.required, Validators.email]],
                passwordFormEx: [null, Validators.required],
              });
            }

            get emailFormEx() { return this.validationForm.get('emailFormEx'); }
            get passwordFormEx() { return this.validationForm.get('passwordFormEx'); }
          }
        
        
    

Disabled input

Add the disabled boolean attribute on an input to prevent user interactions.

To use not-allowed cursor, add .disabled class to the label.

        
            
          <div class="md-form form-sm">
            <input type="text" id="form11" class="form-control" disabled>
            <label for="form11" class="disabled">Example label</label>
          </div>
        
        
    

Form layouts

Since Bootstrap applies both display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Form groups

The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default, it only applies margin-bottom, but it picks up additional styles in .form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other element.

        
            
              <!-- Material form group -->
              <form>
                <!-- Material input -->
                <div class="md-form form-group mt-5">
                  <input mdbInput type="text" class="form-control" id="formGroupExampleInputMD" placeholder="Example input">
                  <label for="formGroupExampleInputMD">Example label</label>
                </div>
                <!-- Material input -->
                <div class="md-form form-group mt-5">
                  <input mdbInput type="text" class="form-control" id="formGroupExampleInput2MD" placeholder="Another input">
                  <label for="formGroupExampleInput2MD">Another label</label>
                </div>
              </form>
              <!-- Material form group -->
            
        
    

Form grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

        
            
              <!-- Material form grid -->
              <form>
                <!-- Grid row -->
                <div class="row">
                  <!-- Grid column -->
                  <div class="col">
                    <!-- Material input -->
                    <div class="md-form mt-0">
                      <input mdbInput type="text" class="form-control" placeholder="First name">
                    </div>
                  </div>
                  <!-- Grid column -->
                  <!-- Grid column -->
                  <div class="col">
                    <!-- Material input -->
                    <div class="md-form mt-0">
                      <input mdbInput type="text" class="form-control" placeholder="Last name">
                    </div>
                  </div>
                  <!-- Grid column -->
                </div>
                <!-- Grid row -->
              </form>
              <!-- Material form grid -->
            
        
    

Form row

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

        
            
          <!-- Material form row -->
          <form>
            <!-- Grid row -->
            <div class="form-row">
              <!-- Grid column -->
              <div class="col">
                <!-- Material input -->
                <div class="md-form mt-0">
                  <input type="text" class="form-control" placeholder="First name">
                </div>
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col">
                <!-- Material input -->
                <div class="md-form mt-0">
                  <input type="text" class="form-control" placeholder="Last name">
                </div>
              </div>
              <!-- Grid column -->
            </div>
            <!-- Grid row -->
          </form>
          <!-- Material form row -->
        
        
    
        
            
          <!-- Default form row -->
          <form>
            <!-- Grd row -->
            <div class="form-row">
              <!-- Grid column -->
              <div class="col">
                <!-- Default input -->
                <input mdbInput type="text" class="form-control" placeholder="First name">
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col">
                <!-- Default input -->
                <input mdbInput type="text" class="form-control" placeholder="Last name">
              </div>
              <!-- Grid column -->
            </div>
            <!-- Grd row -->
          </form>
          <!-- Default form row -->
        
        
    

More complex layouts can also be created with the grid system.

        
            
          <!-- Extended material form grid -->
          <form>
            <!-- Grid row -->
            <div class="form-row">
              <!-- Grid column -->
              <div class="col-md-6">
                <!-- Material input -->
                <div class="md-form form-group">
                  <input mdbInput type="email" class="form-control" id="inputEmail4MD" placeholder="Email">
                  <label for="inputEmail4MD">Email</label>
                </div>
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col-md-6">
                <!-- Material input -->
                <div class="md-form form-group">
                  <input mdbInput type="password" class="form-control" id="inputPassword4MD" placeholder="Password">
                  <label for="inputPassword4MD">Password</label>
                </div>
              </div>
              <!-- Grid column -->
            </div>
            <!-- Grid row -->
            <!-- Grid row -->
            <div class="row">
              <!-- Grid column -->
              <div class="col-md-12">
                <!-- Material input -->
                <div class="md-form form-group">
                  <input mdbInput type="text" class="form-control" id="inputAddressMD" placeholder="1234 Main St">
                  <label for="inputAddressMD">Address</label>
                </div>
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col-md-12">
                <!-- Material input -->
                <div class="md-form form-group">
                  <input mdbInput type="text" class="form-control" id="inputAddress2MD" placeholder="Apartment, studio, or floor">
                  <label for="inputAddress2MD">Address 2</label>
                </div>
              </div>
              <!-- Grid column -->
            </div>
            <!-- Grid row -->
            <!-- Grid row -->
            <div class="form-row">
              <!-- Grid column -->
              <div class="col-md-6">
                <!-- Material input -->
                <div class="md-form form-group">
                  <input mdbInput type="text" class="form-control" id="inputCityMD" placeholder="New York City">
                  <label for="inputCityMD">City</label>
                </div>
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col-md-6">
                <!-- Material input -->
                <div class="md-form form-group">
                  <input mdbInput type="text" class="form-control" id="inputZipMD" placeholder="11206-1117">
                  <label for="inputZipMD">Zip</label>
                </div>
              </div>
              <!-- Grid column -->
            </div>
            <!-- Grid row -->
            <button type="submit" mdbBtn color="primary">Sign in</button>
          </form>
          <!-- Extended material form grid -->
        
        
    
        
            
          <!-- Extended default form grid -->
          <form>
            <!-- Grid row -->
            <div class="form-row">
              <!-- Default input -->
              <div class="form-group col-md-6">
                <input mdbInput type="email" class="form-control" id="inputEmail4" placeholder="Email">
                <label for="inputEmail4">Email</label>
              </div>
              <!-- Default input -->
              <div class="form-group col-md-6">
                <input mdbInput type="password" class="form-control" id="inputPassword4" placeholder="Password">
                <label for="inputPassword4">Password</label>
              </div>
            </div>
            <!-- Grid row -->
            <!-- Default input -->
            <div class="form-group">
              <input mdbInput type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
              <label for="inputAddress">Address</label>
            </div>
            <!-- Default input -->
            <div class="form-group">
              <input mdbInput type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
              <label for="inputAddress2">Address 2</label>
            </div>
            <!-- Grid row -->
            <div class="form-row">
              <!-- Default input -->
              <div class="form-group col-md-6">
                <input mdbInput type="text" class="form-control" id="inputCity" placeholder="New York City">
                <label for="inputCity">City</label>
              </div>
              <!-- Default input -->
              <div class="form-group col-md-6">
                <input mdbInput type="text" class="form-control" id="inputZip" placeholder="11206-1117">
                <label for="inputZip">Zip</label>
              </div>
            </div>
            <!-- Grid row -->
            <button type="submit" mdbBtn color="primary">Sign in</button>
          </form>
          <!-- Extended default form grid -->
        
        
    

Horizontal form

You can create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. When doing this, be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.

At times, you maybe need to use margin or padding utilities to create that perfect alignment you desire. For example, we’ve removed the padding-top on our stacked radio inputs label to better align the text baseline.

        
            
          <!-- Horizontal material form -->
          <form>
            <!-- Grid row -->
            <div class="form-group row">
              <!-- Material input -->
              <label for="inputEmail3MD" class="col-sm-2 col-form-label">Email</label>
              <div class="col-sm-10">
                <div class="md-form mt-0">
                  <input mdbInput type="email" class="form-control" id="inputEmail3MD" placeholder="Email">
                </div>
              </div>
            </div>
            <!-- Grid row -->
            <!-- Grid row -->
            <div class="form-group row">
              <!-- Material input -->
              <label for="inputPassword3MD" class="col-sm-2 col-form-label">Password</label>
              <div class="col-sm-10">
                <div class="md-form mt-0">
                  <input mdbInput type="password" class="form-control" id="inputPassword3MD" placeholder="Password">
                </div>
              </div>
            </div>
            <!-- Grid row -->
            <!-- Grid row -->
            <div class="form-group row">
              <div class="col-sm-10">
                <button type="submit" mdbBtn color="primary">Sign in</button>
              </div>
            </div>
            <!-- Grid row -->
          </form>
          <!-- Horizontal material form -->
        
        
    
        
            
          <!-- Default horizontal form -->
          <form>
            <!-- Grid row -->
            <div class="form-group row">
              <!-- Default input -->
              <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
              <div class="col-sm-10">
                <input mdbInput type="email" class="form-control" id="inputEmail3" placeholder="Email">
              </div>
            </div>
            <!-- Grid row -->
            <!-- Grid row -->
            <div class="form-group row">
              <!-- Default input -->
              <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
              <div class="col-sm-10">
                <input mdbInput type="password" class="form-control" id="inputPassword3" placeholder="Password">
              </div>
            </div>
            <!-- Grid row -->
            <!-- Grid row -->
            <div class="form-group row">
              <div class="col-sm-10">
                <button type="submit" mdbBtn color="primary">Sign in</button>
              </div>
            </div>
            <!-- Grid row -->
          </form>
          <!-- Default horizontal form -->
        
        
    

Column sizing

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.

        
            
          <!-- Material column sizing form -->
          <form>
            <!-- Grid row -->
            <div class="form-row">
              <!-- Grid column -->
              <div class="col-7">
                <!-- Material input -->
                <div class="md-form">
                  <input mdbInput type="text" class="form-control" placeholder="City">
                </div>
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col">
                <!-- Material input -->
                <div class="md-form">
                  <input mdbInput type="text" class="form-control" placeholder="State">
                </div>
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col">
                <!-- Material input -->
                <div class="md-form">
                  <input mdbInput type="text" class="form-control" placeholder="Zip">
                </div>
              </div>
              <!-- Grid column -->
            </div>
            <!-- Grid row -->
          </form>
          <!-- Material column sizing form -->
        
        
    
        
            
          <!-- Default column sizing form -->
          <form>
            <!-- Grid row -->
            <div class="form-row">
              <!-- Grid column -->
              <div class="col-7">
                <!-- Default input -->
                <input mdbInput type="text" class="form-control" placeholder="City">
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col">
                <!-- Default input -->
                <input mdbInput type="text" class="form-control" placeholder="State">
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col">
                <!-- Default input -->
                <input mdbInput type="text" class="form-control" placeholder="Zip">
              </div>
              <!-- Grid column -->
            </div>
            <!-- Grid row -->
          </form>
          <!-- Default column sizing form -->
        
        
    

Auto-sizing

The example below uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.

@
        
            
          <!-- Material auto-sizing form -->
          <form>
            <!-- Grid row -->
            <div class="form-row align-items-center">
              <!-- Grid column -->
              <div class="col-auto">
                <!-- Material input -->
                <div class="md-form">
                  <input mdbInput type="text" class="form-control mb-2" id="inlineFormInputMD" placeholder="Jane Doe">
                  <label class="sr-only" for="inlineFormInputMD">Name</label>
                </div>
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col-auto">
                <!-- Material input -->
                <label class="sr-only" for="inlineFormInputGroupMD">Username</label>
                <div class="md-form input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text md-addon">@</span>
                  </div>
                  <input mdbInput type="text" class="form-control pl-0 rounded-0" id="inlineFormInputGroupMD" placeholder="Username">
                </div>
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col-auto">
                <button type="submit" mdbBtn color="primary" class="mb-0">Submit</button>
              </div>
              <!-- Grid column -->
            </div>
            <!-- Grid row -->
          </form>
          <!-- Material auto-sizing form -->
        
        
    
@
        
            
          <!-- Default auto-sizing form -->
          <form>
            <!-- Grid row -->
            <div class="form-row align-items-center">
              <!-- Grid column -->
              <div class="col-auto">
                <!-- Default input -->
                <label class="sr-only" for="inlineFormInput">Name</label>
                <input mdbInput type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col-auto">
                <!-- Default input -->
                <label class="sr-only" for="inlineFormInputGroup">Username</label>
                <div class="input-group mb-2">
                  <div class="input-group-prepend">
                    <div class="input-group-text">@</div>
                  </div>
                  <input mdbInput type="text" class="form-control py-0" id="inlineFormInputGroup" placeholder="Username">
                </div>
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col-auto">
                <button type="submit" mdbBtn color="primary" class="mt-0">Submit</button>
              </div>
            </div>
            <!-- Grid row -->
          </form>
          <!-- Default auto-sizing form -->
        
        
    

Inline forms

Use can usethe .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.

  • The controls are display: flex, collapsing any HTML white space and allowing you to provide alignment control with spacing and flexbox utilities.
  • Controls and input groups receive width: auto to override the Bootstrap default width: 100%.
  • Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.

You may need to manually address the width and alignment of individual form controls with spacing utilities (as shown below). Lastly, be sure to always include a <label> with each form control, even if you need to hide it from non-screenreader visitors with .sr-only.

@
Remember me
        
            
          <!-- Material inline form -->
          <form class="form-inline">
            <!-- Material input -->
            <div class="md-form">
              <input mdbInput type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2MD" placeholder="Jane Doe">
              <label class="sr-only" for="inlineFormInputName2MD">Name</label>
            </div>
            <!-- Material input -->
            <label class="sr-only" for="inlineFormInputGroupUsername2MD">Username</label>
            <div class="md-form input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text md-addon">@</span>
              </div>
              <input mdbInput type="text" class="form-control pl-0 rounded-0" id="inlineFormInputGroupUsername2MD" placeholder="Username">
            </div>
            <!-- Checkbox -->
            <mdb-checkbox mdbInput class="mb-2 mr-sm-2">Remember me</mdb-checkbox>
            <button type="submit" mdbBtn color="primary" class="mb-0">Submit</button>
          </form>
          <!-- Material inline form -->
        
        
    
@
Remember me
        
            
          <!-- Default inline form -->
          <form class="form-inline">
            <!-- Default input -->
            <label class="sr-only" for="inlineFormInputName2">Name</label>
            <input mdbInput type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
            <!-- Default input -->
            <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
            <div class="input-group mb-2 mr-sm-2">
              <div class="input-group-prepend">
                <div class="input-group-text">@</div>
              </div>
              <input mdbInput type="text" class="form-control py-0" id="inlineFormInputGroupUsername2" placeholder="Username">
            </div>
            <!-- Checkbox -->
            <mdb-checkbox mdbInput class="mb-2 mr-sm-2">Remember me</mdb-checkbox>
            <button type="submit" mdbBtn color="primary" class="mt-0">Submit</button>
          </form>
          <!-- Default inline form -->
        
        
    

Numeric input

Press the Shift key and then the Arrow Up / Arrow Down key to change the input value by + 10 / - 10.

Press the Alt key and then the Arrow Up / Arrow Down key to change the input value by + 0.1 / - 0.1.

The above functionality is possible by adding the mdbInput to the input element.

        
            
          <div class="md-form">
            <input type="number" class="form-control" id="numberInputEx" mdbInput>
            <label for="numberInputEx">Number input</label>
          </div>
        
        
    

Character counter MDB Pro component

Use a character counter in fields where a character restriction is in place.

Input field

        
            
          <div class="md-form">
            <input id="input_text" class="form-control" type="text" length="10" mdbCharCounter mdbInput>
            <label for="input_text">Input text</label>
          </div>
        
        
    

Textarea

        
            
          <div class="md-form">
            <textarea class="md-textarea form-control " rows="3" id="input_text" type="text" length="120" mdbCharCounter mdbInput></textarea>
            <label for="input_text">Type your text</label>
          </div>
        
        
    

Outline inputs - Material 2.0

New Material 2.0 styles of inputs


Input field

        
            
          <!-- Material outline input -->
          <div class="md-form md-outline">
            <input type="text" id="form1" class="form-control" mdbInput>
            <label for="form1">Example label</label>
          </div>
        
        
    

Large outline input

        
            
              <!-- Large outline input -->
              <div class="md-form md-outline form-lg">
                <input id="form-lg" class="form-control form-control-lg" type="text" mdbInput>
                <label for="form-lg">Example label</label>
              </div>
            
        
    

Small outline input

        
            
              <!-- Small outline input -->
              <div class="md-form md-outline form-sm">
                <input id="form-sm" class="form-control form-control-sm" type="text" mdbInput>
                <label for="form-sm">Example label</label>
              </div>
            
        
    

Prefix

We'll never share your email with anyone.
        
            
          <div class="md-form md-outline">
            <mdb-icon fas icon="envelope"></mdb-icon>
            <input type="text" id="inputIconEx1" class="form-control" mdbInput>
            <label for="inputIconEx1">E-mail address</label>
            <small id="emailHelp2" class="form-text text-muted">We'll never share your email with anyone.</small>
          </div>
        
        
    

Character counter

        
            
          <!-- Material outline counter input -->
          <div class="md-form md-outline">
            <input id="input-char-counter1" type="text" length="10" class="form-control" mdbCharCounter mdbInput>
            <label for="input-char-counter1">Input text</label>
          </div>
        
        
    

Disabled

        
            
          <!-- Material outline disabled input -->
          <div class="md-form md-outline">
            <input type="text" id="inputDisabledEx13" class="form-control" disabled mdbInput>
            <label for="inputDisabledEx13" class="disabled">Example label</label>
          </div>
        
        
    

Validation

        
            
              <!-- Outline validation input -->
              <div class="md-form md-outline">
                <input mdbInput mdbValidate name="email" type="email" id="form8" class="form-control" [(ngModel)]="email" #input="ngModel" required pattern="[^ @]*@[^ @]*">
                <label for="form2">Email validator</label>
                <mdb-error *ngIf="input.invalid && (input.dirty || input.touched)">Input invalid</mdb-error>
                <mdb-success *ngIf="input.valid && (input.dirty || input.touched)">Input valid</mdb-success>
              </div>
            
        
    
        
            
              <!-- Outline validation input -->
              <div class="md-form md-outline">
                <input mdbInput mdbValidate name="input2" type="password" id="form2" class="form-control" [(ngModel)]="minLength" #input2="ngModel" required minlength="3">
                <label for="form2">password validator</label>
                <mdb-error *ngIf="input2.invalid && (input2.dirty || input2.touched)">Input invalid</mdb-error>
                <mdb-success *ngIf="input2.valid && (input2.dirty || input2.touched)">Input valid</mdb-success>
              </div>
            
        
    

Textarea

        
            
          <!--Material textarea-->
          <div class="md-form md-outline">
            <textarea type="text" id="form75" class="form-control md-textarea" rows="3" mdbInput></textarea>
            <label for="form75">Material textarea</label>
          </div>
        
        
    

Inputs with background and animated border - Material 2.0

New Material 2.0 styles of inputs


Input field

        
            
          <!-- Material background input -->
          <div class="md-form md-bg">
            <input type="text" id="formBg1" class="form-control" mdbInput>
            <label for="formBg1">Example label</label>
          </div>
        
        
    

Large input with background

        
            
              <!-- Large background input -->
              <div class="md-form md-bg form-lg">
                <input id="form-bg-lg" class="form-control form-control-lg" type="text" mdbInput>
                <label for="form-bg-lg">Example label</label>
              </div>
            
        
    

Small input with background

        
            
              <!-- Small background input -->
              <div class="md-form md-bg form-sm">
                <input id="form-bg-sm" class="form-control form-control-sm" type="text" mdbInput>
                <label for="form-bg-sm">Example label</label>
              </div>
            
        
    

A fix for the default background color of input in the browser

When you use a browser, sometimes you save your e-mail address and the password on the page. On any website where you have a form and you saved your data, Chrome is auto-filling the email and password fields and changes the background color to a pale yellow or blue color.

To avoid this default behavior of the browser, you can use the solution below:


Basic solution

In our basic example, we want to remove the blue background and black text and change it to a transparent background and grey text.

Here you can find a snippet with a working example. It works with outline inputs too.

        
            
          @-webkit-keyframes autofill {
            to {
              color: #666;
              background: transparent;
            }
          }
          @keyframes autofill {
            to {
              color: #666;
              background: transparent;
            }
          }
          input:-webkit-autofill {
            -webkit-animation-name: autofill;
            animation-name: autofill;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
          }
          .md-form > input[type]:-webkit-autofill:not(.browser-default):not([type='search']) + label {
            transform: translateY(-14px);
          }
        
        
    

Angular Inputs - API

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


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.

API Reference for MDB Angular Inputs:
        
            
          import { InputsModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard';
          import { CharCounterModule } from 'ng-uikit-pro-standard';
        
        
    
        
            
          import { InputsModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md';