Angular Bootstrap inputs

Angular Inputs - Bootstrap 4 & Material Design

Angular Bootstrap inputs are a special fields which 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 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, 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: string;
        }
      

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">
          <i class="fas fa-envelope prefix"></i>
          <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

minLength, maxLength defines minimum and maximum input length. data-error, data-success provides space to enter your's custom error or success message.

Use 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 the validation, use [mdbValidation]="false" on the input element, which should not display the validation status. Use [validateSuccess]="false" or [validateError]="false" to disable only one type of message.


        <form [formGroup]="validationForm">
          <div class="md-form">
            <i class="fa fa-envelope prefix"></i>
            <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">
            <i class="fa fa-lock prefix"></i>
            <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 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" class="btn btn-primary btn-md">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" class="btn btn-primary btn-md">Sign in</button>
        </form>
        <!-- Extended default form grid -->

      

Horizontal form

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. 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 need. 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" class="btn btn-primary btn-md">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" class="btn btn-primary btn-md">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" class="btn btn-primary 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" class="btn btn-primary btn-md mt-0">Submit</button>
            </div>
          </div>
          <!-- Grid row -->
        </form>
        <!-- Default auto-sizing form -->

      

Inline forms

Use the .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.

  • 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.

@


        <!-- 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 -->
          <div class="form-check mb-2 mr-sm-2">
            <input mdbInput class="form-check-input" type="checkbox" id="inlineFormCheckMD">
            <label class="form-check-label" for="inlineFormCheckMD">
              Remember me
            </label>
          </div>

          <button type="submit" class="btn btn-primary mb-0">Submit</button>
        </form>
        <!-- Material inline form -->
      
@


        <!-- 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 -->
          <div class="form-check mb-2 mr-sm-2">
            <input mdbInput class="form-check-input" type="checkbox" id="inlineFormCheck">
            <label class="form-check-label" for="inlineFormCheck">
              Remember me
            </label>
          </div>

          <button type="submit" class="btn btn-primary btn-md 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.

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 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 a solution below:


Basic solution

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

Here you can find a snippet with 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; }

      

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:
// MDB Angular Pro
import { InputsModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
// For Char Counter
import { CharCounterModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { InputsModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'