Angular Bootstrap inputs

MDB provides several form control styles, layout options, and custom components for creating a wide variety of 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.


Input fields

Basic example



<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>
    <div class="md-form">
      <i class="fa fa-envelope prefix"></i>
      <input mdbInputDirective data-error="wrong email" [formControl]="emailFormEx" data-success="valid email" minLength="8" maxLength="25"
        type="email" class="form-control" id="form9" name="email" mdbInputDirective>
      <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" [formControl]="passwordFormEx" data-success="valid password" minLength="10"
        maxLength="25" type="password" class="form-control" id="form10" name="password">
      <label for="form10">Type your password</label>
    </div>

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

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

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

      <div class="md-form">
        <input mdbInputDirective [errorMessage]="errorMessage" [successMessage]="'Custom success message'" [formControl]="customMessages" type="text" class="form-control" id="form14" name="password">
        <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 {
  emailFormEx: FormControl;
  passwordFormEx: FormControl;
  noValidation: FormControl;
  noSuccessValidation: FormControl;
  noErrorValidation: FormControl;
  customMessages: FormControl;
  errorMessage = 'Custom error message';

  constructor() {
    this.emailFormEx = new FormControl('', Validators.email);
    this.passwordFormEx = new FormControl('', Validators.required);
    this.noValidation = new FormControl('', Validators.required);
    this.noSuccessValidation = new FormControl('', Validators.required);
    this.noErrorValidation = new FormControl('', Validators.required);
    this.customMessages = new FormControl('', 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.

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 behave differently:

  • Controls are display: inline-block to provide alignment control via vertical-align and margin.
  • Controls receive width: auto to override the Bootstrap default width: 100%.
  • Controls only appear inline in viewports that are at least 768px wide to account for narrow viewports on mobile devices.

Because of this, you may need to address the width and alignment of individual form controls manually. Lastly, as shown below, you should always include a <label> with each form control.


<form class="form-inline">

  <div class="md-form form-group">
      <i class="fa fa-envelope prefix"></i>
      <input mdbInputDirective type="email" class="form-control" id="form9" name="email">
      <label for="form9">Type your e-mail</label>
  </div>
  <div class="md-form form-group">
      <i class="fa fa-lock prefix"></i>
      <input mdbInputDirective type="password" class="form-control" id="form10" name="password">
      <label for="form10">Type your password</label>
  </div>

  <div class="md-form form-group">
      <a mdbBtn color="primary" size="lg" class="waves-light" mdbWavesEffect>Login</a>
  </div>

</form>
      

Using the Grid

For more structured form layouts, you can utilize Bootstrap’s predefined grid classes (or mixins). Add the .row class to form groups and use the .col-* classes to specify the width of your labels and controls.


<form>
  <!--First row-->
  <div class="row">
      <!--First column-->
      <div class="col-md-6">
          <div class="md-form">
              <i class="fa fa-envelope prefix"></i>
              <input mdbInputDirective type="email" class="form-control" id="form9" name="email">
              <label for="form9">Type your e-mail</label>
          </div>
      </div>

      <!--Second column-->
      <div class="col-md-6">
          <div class="md-form">
              <i class="fa fa-lock prefix"></i>
              <input mdbInputDirective type="password" class="form-control" id="form10" name="password">
              <label for="form10">Type your password</label>
          </div>
      </div>
  </div>
  <!--/.First row-->

  <!--Second row-->
  <div class="row">
      <!--First column-->
      <div class="col-md-12">

          <div class="md-form">
              <textarea mdbInputDirective type="text" id="form76" class="md-textarea form-control" rows="3"></textarea>
              <label for="form76">Basic textarea</label>
          </div>

      </div>
  </div>
  <!--/.Second row-->

  <!--Third row-->
  <div class="row">

      <!--First column-->
      <div class="col-md-4">
          <div class="md-form">
              <input mdbInputDirective type="text" id="form41" class="form-control">
              <label for="form41" class="">Example label</label>
          </div>
      </div>

      <!--Second column-->
      <div class="col-md-4">
          <div class="md-form">
              <input mdbInputDirective type="text" id="form51" class="form-control">
              <label for="form51" class="">Example label</label>
          </div>
      </div>

      <!--Third column-->
      <div class="col-md-4">
          <div class="md-form">
              <input mdbInputDirective type="text" id="form61" class="form-control">
              <label for="form61" class="">Example label</label>
          </div>
      </div>

  </div>
  <!--/.Third row-->
</form>
      

Textarea


<!--Basic textarea-->
<div class="md-form">
  <textarea mdbInputDirective type="text" id="form7" class="md-textarea form-control" rows="3" ></textarea>
  <label for="form7">Basic textarea</label>
</div>

<!--Textarea with icon prefix-->
<div class="md-form">
  <i class="fa fa-pencil prefix"></i>
  <textarea mdbInputDirective type="text" id="form8" class="md-textarea form-control" rows="3" ></textarea>
  <label for="form8">Icon Prefix</label>
</div>
      

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>

Checkboxes MDB Pro component

Basic examples


<div class="form-check">
  <input class="form-check-input" mdbInputDirective type="checkbox" id="checkbox1">
  <label class="form-check-label" for="checkbox1">Classic checkbox</label>
</div>

<div class="form-check">
  <input class="form-check-input" mdbInputDirective type="checkbox" class="form-check-input filled-in" id="checkbox2">
  <label class="form-check-label" for="checkbox2">Filled-in checkbox</label>
</div>
      

Disabled checkboxes


<div class="form-check">
  <input class="form-check-input" type="checkbox" id="checkbox3" disabled checked="checked">
  <label class="form-check-label" for="checkbox3" class="disabled">Classic checkbox</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" class="form-check-input filled-in" id="checkbox4" disabled checked="checked">
  <label class="form-check-label" for="checkbox4" class="disabled">Filled-in checkbox</label>
</div>
      

Inline checkboxes


<form class="form-inline">
  <div class="form-check mr-3">
      <input class="form-check-input" type="checkbox" id="checkbox11" checked="checked">
      <label class="form-check-label" for="checkbox11">Classic checkbox</label>
  </div>
  <div class="form-check mr-3">
      <input class="form-check-input" type="checkbox" class="form-check-input filled-in" id="checkbox22" checked="checked">
      <label class="form-check-label" for="checkbox22">Filled-in checkbox</label>
  </div>
  <div class="form-check mr-3">
      <input class="form-check-input" type="checkbox" id="checkbox33" checked="checked">
      <label class="form-check-label" for="checkbox33">Classic checkbox</label>
  </div>
</form>
      

How to allow change checkbox / radio on focus?

In situation when user wants to change checkbox / radio elements after focus (tab in example), adding mdbInputDirective to every input element is obligatory to proper working this feature


Radio buttons MDB Pro component

Basic examples



<div class="form-check">
<input class="form-check-input" mdbInputDirective name="group1" type="radio" id="radio1">
<label class="form-check-label" for="radio1">Option 1</label>
</div>

<div class="form-check">
<input class="form-check-input" mdbInputDirective name="group1" type="radio" id="radio2">
<label class="form-check-label" for="radio2">Option 2</label>
</div>

<div class="form-check">
<input class="form-check-input" mdbInputDirective name="group1" type="radio" id="radio3">
<label class="form-check-label" for="radio3">Option 3</label>
</div>
      

Radio buttons with gap



<div class="form-check">
<input name="group2" type="radio" class="form-check-input with-gap" id="radio4">
<label class="form-check-label" for="radio4">Option 1</label>
</div>

<div class="form-check">
<input name="group2" type="radio" class="form-check-input with-gap" id="radio5">
<label class="form-check-label" for="radio5">Option 2</label>
</div>

<div class="form-check">
<input name="group2" type="radio" class="form-check-input with-gap" id="radio6">
<label class="form-check-label" for="radio6">Option 3</label>
</div>
      

Inline radio buttons



<form class="form-inline">
  <div class="form-check mr-3">
      <input class="form-check-input" name="group1" type="radio" id="radio11" checked="checked">
      <label class="form-check-label" for="radio11">Option 1</label>
  </div>

  <div class="form-check mr-3">
      <input class="form-check-input" name="group1" type="radio" id="radio21">
      <label class="form-check-label" for="radio21">Option 2</label>
  </div>

  <div class="form-check mr-3">
      <input class="form-check-input" name="group1" type="radio" id="radio31">
      <label class="form-check-label" for="radio31">Option 3</label>
  </div>
</form>
      

Switch MDB Pro component

Basic example:

Disabled:

<!-- Switch -->
<div class="switch">
<label>
  Off
  <input type="checkbox">
  <span class="lever"></span>
  On
</label>
</div>

<!-- Disabled Switch -->
<div class="switch">
<label>
  Off
  <input disabled type="checkbox">
  <span class="lever"></span>
  On
</label>
</div>
      

File input MDB Pro component

Basic example


Add mdbFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" to the .file <input> and [value]="showFiles()" to the .file-path <input>.

Choose file


<form>
  <div class="file-field md-form">
    <div mdbBtn color="primary" size="sm" class="waves-light" mdbWavesEffect>
      <span>Choose file</span>
      <input type="file" mdbFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput">
    </div>
    <div class="file-path-wrapper">
      <input class="file-path" type="text" placeholder="Upload your file" [value]="showFiles()">
    </div>
  </div>
  <button class="btn btn-md btn-primary" (click)="startUpload()">Start uploading</button>
</form>
	

import { Component, EventEmitter } from '@angular/core';
import { UploadFile, UploadInput, UploadOutput } from 'ng-uikit-pro-standard';
import { humanizeBytes } from 'ng-uikit-pro-standard';

@Component({
selector: 'file-input-example',
templateUrl: 'file-input.html',
})

export class FileInputComponent  {
  formData: FormData;
  files: UploadFile[];
  uploadInput: EventEmitter<UploadInput>;
  humanizeBytes: Function;
  dragOver: boolean;

  constructor() {
      this.files = [];
      this.uploadInput = new EventEmitter<UploadInput>();
      this.humanizeBytes = humanizeBytes;
  }

  showFiles() {
      let files = '';
      for (let i = 0; i < this.files.length; i ++) {
        files += this.files[i].name;
         if (!(this.files.length - 1 === i)) {
           files += ',';
        }
      }
      return files;
   }

  startUpload(): void {
      const event: UploadInput = {
      type: 'uploadAll',
      url: 'your-path-to-backend-endpoint',
      method: 'POST',
      data: { foo: 'bar' },
      };

      this.uploadInput.emit(event);
  }

  cancelUpload(id: string): void {
      this.uploadInput.emit({ type: 'cancel', id: id });
  }

  onUploadOutput(output: UploadOutput | any): void {

      if (output.type === 'allAddedToQueue') {
      } else if (output.type === 'addedToQueue') {
        this.files.push(output.file); // add file to array when added
      } else if (output.type === 'uploading') {
        // update current data in files array for uploading file
        const index = this.files.findIndex(file => file.id === output.file.id);
        this.files[index] = output.file;
      } else if (output.type === 'removed') {
        // remove file from array when removed
        this.files = this.files.filter((file: UploadFile) => file !== output.file);
      } else if (output.type === 'dragOver') {
        this.dragOver = true;
      } else if (output.type === 'dragOut') {
      } else if (output.type === 'drop') {
        this.dragOver = false;
      }
      this.showFiles();
  }
}
  

Range MDB Pro component

Add a range slider for values with a wide range. This one is set to be a number between 0 and 100.


<form class="range-field mt-5">
  <div class="track">
      <div #rangeCloud class="range-cloud" title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}">
          <span class="text-transform">{{range}}</span>
      </div>
  </div>
  <input #input name="range" type="range" min="0" max="100" (focus)="visibility = true" (blur)="visibility = false" [(ngModel)]="range"
      (change)="coverage()">
</form>
	

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({
selector: 'range-example',
templateUrl: 'range.html',
})

export class RangeComponent {
  @ViewChild('input') input: ElementRef;
  @ViewChild('rangeCloud') rangeCloud: ElementRef;
  range: any = 50;

  constructor(private renderer: Renderer2) { }

  coverage() {
  if (typeof this.range === "string" && this.range.length !== 0) {

    return this.range;
  }
  const maxValue = this.input.nativeElement.getAttribute('max');
  const cloudRange = (this.range / maxValue) * 100;
  this.renderer.setStyle(this.rangeCloud.nativeElement, 'left', cloudRange + '%')
}
}
  

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>
      

API Reference:

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

API Reference for MDB Angular Inputs:
// MDB Angular Pro
import { InputsModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
// For File Input
import { FileInputModule } 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'