Rate this docs

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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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="fa fa-envelope prefix"></i>
          <input mdbInputDirective type="text" id="form2" class="form-control">
          <label for="form2">Example label</label>
        </div>
      

Placeholder


        <div class="md-form">
          <input mdbInputDirective 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" mdbInputDirective>
          <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 [mdbValidate]="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 mdbInputDirective data-error="wrong email" data-success="valid email" formControlName="emailFormEx" minLength="8"
      maxLength="25" type="email" class="form-control" id="form9">
    <label for="form9">Type your e-mail</label>
  </div>

  <div class="md-form">
    <i class="fa fa-lock prefix"></i>
    <input mdbInputDirective data-error="wrong password" data-success="valid password" formControlName="passwordFormEx"
      minLength="10" maxLength="25" type="password" class="form-control" id="form10">
    <label for="form10">Type your password</label>
  </div>

  <div class="md-form">
    <input mdbInputDirective data-error="wrong password" [mdbValidate]="false" formControlName="noValidation"
      data-success="valid password" type="text" class="form-control" id="form11">
    <label for="form11">Turn off validation</label>
  </div>

  <div class="md-form">
    <input mdbInputDirective data-error="wrong password" [validateSuccess]="false" formControlName="noSuccessValidation"
      data-success="valid password" type="text" class="form-control" id="form12">
    <label for="form12">Turn off success validation</label>
  </div>

  <div class="md-form">
    <input mdbInputDirective data-error="wrong password" [validateError]="false" formControlName="noErrorValidation"
      data-success="valid password" type="text" class="form-control" id="form13">
    <label for="form13">Turn off error validation</label>
  </div>

  <div class="md-form">
    <input mdbInputDirective [errorMessage]="errorMessage" [successMessage]="'Custom success message'" formControlName="customMessages"
      type="text" class="form-control" id="form14">
    <label for="form14">Custom validation messages</label>
  </div>
</form>
      

        import { FormControl, Validators } 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;
          successMessage = 'Custom success message';
          errorMessage = 'Custom error message';

        constructor(private fb: FormBuilder) {
          this.validationForm = fb.group({
            emailFormEx: [null, [Validators.required, Validators.email]],
            passwordFormEx: [null, Validators.required],
            noValidation: [null, Validators.required],
            noSuccessValidation: [null, Validators.required],
            noErrorValidation: [null, Validators.required],
            customMessages: [null, Validators.required]
          });
        }
        }
      

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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective type="text" class="form-control" placeholder="First name">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col">
              <!-- Default input -->
              <input mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
            <label for="inputAddress">Address</label>
          </div>
          <!-- Default input -->
          <div class="form-group">
            <input mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective type="text" class="form-control" placeholder="City">
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col">
              <!-- Material input -->
              <div class="md-form">
                <input mdbInputDirective type="text" class="form-control" placeholder="State">
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col">
              <!-- Material input -->
              <div class="md-form">
                <input mdbInputDirective 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 mdbInputDirective type="text" class="form-control" placeholder="City">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col">
              <!-- Default input -->
              <input mdbInputDirective type="text" class="form-control" placeholder="State">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col">
              <!-- Default input -->
              <input mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective type="text" class="form-control py-0" id="inlineFormInputGroupUsername2" placeholder="Username">
          </div>
          <!-- Checkbox -->
          <div class="form-check mb-2 mr-sm-2">
            <input mdbInputDirective 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 mdbInputDirective to the input element.


        <div class="md-form">
          <input type="number" class="form-control" id="numberInputEx" mdbInputDirective>
          <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 mdbInputDirective>
          <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 mdbInputDirective></textarea>
  <label for="input_text">Type your text</label>
</div>
      

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'