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.
Input fields
Basic example
<div class="md-form">
<input mdbActive type="text" id="form1" class="form-control">
<label for="form1" class="">Example label</label>
</div>
Small input
<div class="md-form form-sm">
<input mdbActive type="text" id="form1" class="form-control">
<label for="form1" class="">Example label</label>
</div>
Icon Prefixes
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input mdbActive type="text" id="form2" class="form-control">
<label for="form2">Example label</label>
</div>
Placeholder
<div class="md-form">
<input placeholder="Placeholder" type="text" id="form58" class="form-control">
<label class="active" for="form58">Example label</label>
</div>
Prefilling Text Inputs
<div class="md-form">
<input value="John Doe" type="text" id="form6" class="form-control">
<label class="active" for="form6">Example label</label>
</div>
Error or Success Messages
To display error or success messages, add the <small> tags below your <input>s, with class="text-danger" or class="text-success" inside.
<form>
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input mdbActive type="email" class="form-control" id="form9" name="email" value="your e-mail">
<label class="active" for="form9">Type your e-mail</label>
<small class="text-danger">wrong</small>
</div>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input mdbActive type="password" class="form-control" id="form10" name="password" value="yourpassword">
<label class="active" for="form10">Type your password</label>
<small class="text-success">right</small>
</div>
</form>
Disabled input
Add the disabled boolean attribute on an input to prevent user interactions.
<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.
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 mdbActive type="email" id="form81" class="form-control validate">
<label for="form81" data-error="wrong" data-success="right">Type your email</label>
</div>
</div>
<!--Second column-->
<div class="col-md-6">
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input mdbActive type="password" id="form82" class="form-control validate">
<label for="form82" data-error="wrong" data-success="right">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 mdbActive type="text" id="form76" class="md-textarea"></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 mdbActive 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 mdbActive 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 mdbActive 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 mdbActive type="text" id="form7" class="md-textarea"></textarea>
<label for="form7">Basic textarea</label>
</div>
<!--Textarea with icon prefix-->
<div class="md-form">
<i class="fa fa-pencil prefix"></i>
<textarea mdbActive type="text" id="form8" class="md-textarea"></textarea>
<label for="form8">Icon Prefix</label>
</div>
Checkboxes Premium component
Basic examples:
<fieldset class="form-group">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Classic checkbox</label>
</fieldset>
<fieldset class="form-group">
<input type="checkbox" class="filled-in" id="checkbox2">
<label for="checkbox2">Filled-in checkbox</label>
</fieldset>
Disabled checkboxes:
<fieldset class="form-group">
<input type="checkbox" id="checkbox3" checked="checked" disabled>
<label for="checkbox3" class="disabled">Classic checkbox</label>
</fieldset>
<fieldset class="form-group">
<input type="checkbox" class="filled-in" id="checkbox4" checked="checked" disabled>
<label for="checkbox4" class="disabled">Filled-in checkbox</label>
</fieldset>
Inline checkboxes
<form class="form-inline">
<fieldset class="form-group">
<input type="checkbox" id="checkbox11" checked="checked">
<label for="checkbox11">Classic checkbox</label>
</fieldset>
<fieldset class="form-group">
<input type="checkbox" class="filled-in" id="checkbox22" checked="checked">
<label for="checkbox22">Filled-in checkbox</label>
</fieldset>
<fieldset class="form-group">
<input type="checkbox" id="checkbox11" checked="checked">
<label for="checkbox11">Classic checkbox</label>
</fieldset>
</form>
Switch Premium 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 Premium component
Basic example:
Add ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" to the .file <input> and [value]="showFiles()" to the .file-path <input>.
For uploading multiple files add a multiple attribute to the .file <input>.
<form>
<div class="file-field">
<div class="btn btn-primary btn">
<span>Choose file</span>
<input type="file" ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path" type="text" placeholder="Upload your file" [value]="showFiles()">
</div>
</div>
</form>
Data structure:
import { Component, EventEmitter } from '@angular/core';
import { UploadFile, UploadInput, UploadOutput } from 'your_path/angular-bootstrap-md/pro';
import { humanizeBytes } from 'your_path/angular-bootstrap-md/pro/file-input';
export class AppComponent {
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: '/upload',
method: 'POST',
data: { foo: 'bar' },
concurrency: 1
}
this.uploadInput.emit(event);
}
cancelUpload(id: string): void {
this.uploadInput.emit({ type: 'cancel', id: id });
}
onUploadOutput(output: UploadOutput): void {
console.log(output);
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 Premium 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">
<div class="track">
<div class="range-cloud" title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}" [ngStyle]="{'left': range + '%'}">
<span class="text-transform">{{range}}</span>
</div>
</div>
<input name="range" type="range" min="0" max="100" (focus)="visibility = true" (blur)="visibility = false" [(ngModel)]="range" (click)="coverage()">
</form>
Data structure:
export class AppComponent {
range: any = 50;
coverage() {
if(typeof this.range === "string" && this.range.length !== 0) {
return this.range;
}
}
}
Character counter Premium component
Use a character counter in fields where a character restriction is in place.
<input id="input_text" type="text" length="100" [(ngModel)]="currentText" (keyup)="changed()" [class]="colored()">
<p class="chars">{{ charsTyped?charsTyped:0 }}/100</p>
<label for="input_text"></label>
Data structure:
export class AppComponent {
currentText: string = '';
charsTyped: number = 0;
changed() {
this.charsTyped = this.currentText.length;
}
colored() {
if((this.charsTyped = this.currentText.length) && this.currentText.length > 100) {
return "counter-danger";
} else {
return "";
}
}
}
Google Maps
Follow 3 simple steps below to add a Google Maps to your project.
Import and add AgmCoreModule in the imports declarations, in the app.module.ts file, to see themap (get an API key here).
import { AgmCoreModule } from '@agm/core';
@NgModule({
imports: [
AgmCoreModule.forRoot({
apiKey: 'your key here'
})
],
})
Data structure:
<agm-map [latitude]="map.lat" [longitude]="map.lng" style="height: 300px;">
<agm-marker [latitude]="map.lat" [longitude]="map.lng"></agm-marker>
</agm-map>
export class AppComponent {
public map: any = { lat: 51.678418, lng: 7.809007 };
}
Input groups
Place one add-on or button on either side of input. You may also place one on both sides of input. We do not support multiple add-ons on a single side, nor multiple form-controls in a single input group.
Basic examples:
@
@example.com
https://example.com/users/
$
.00
<div class="md-form input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="md-form input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="md-form input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="md-form input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
Checkboxes and radio add-ons: Premium component
Place any checkbox or radio option within an input group’s addon instead of text.
<!--Checkbox-->
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" id="checkbox1">
<label for="checkbox1"></label>
</span>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<!--Radio-->
<div class="input-group">
<span class="input-group-addon">
<input type="radio" id="radio1">
<label for="radio1"></label>
</span>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
Button addons:
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you’ll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles
that cannot be overridden.
<!--Left-->
<div class="md-form input-group">
<span class="input-group-btn">
<button class="btn btn-primary btn-lg waves-light" type="button" ripple-radius>Go!</button>
</span>
<input type="search" class="form-control" placeholder="Search for...">
</div>
<!--Right-->
<div class="md-form input-group">
<input type="search" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-primary btn-lg waves-light" type="button" ripple-radius>Go!</button>
</span>
</div>
<!--Both sides-->
<div class="md-form input-group">
<span class="input-group-btn">
<button class="btn btn-default btn-lg waves-light" type="button" ripple-radius>Hate it</button>
</span>
<input type="text" class="form-control" placeholder="Product name">
<span class="input-group-btn">
<button class="btn btn-danger btn-lg waves-light" type="button" ripple-radius>Love it</button>
</span>
</div>
Autocomplete Premium component
<div class="md-form">
<ng2-completer [label]="'What is your favorite US state?'" name="autocomplete" [(ngModel)]="state" [datasource]="states" [minSearchLength]="0"></ng2-completer>
</div>
Data structure:
export class AppComponent {
state: string;
states = ['Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
... ];
}
Alternate Version
<div class="md-form">
<input type="text" class="input-alternate" placeholder="John Doe">
</div>