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 <label>
tags, 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" inputValidate>
<label class="active" for="form9">Type your e-mail</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input mdbActive type="password" class="form-control" id="form10" name="password" inputValidate>
<label class="active" for="form10">Type your password</label>
</div>
</form>
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 viavertical-align
andmargin
. - Controls receive
width: auto
to override the Bootstrap defaultwidth: 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 mdbActive type="email" class="form-control" id="form9" name="email" inputValidate>
<label class="active" for="form9">Type your e-mail</label>
</div>
<div class="md-form form-group">
<i class="fa fa-lock prefix"></i>
<input mdbActive type="password" class="form-control" id="form10" name="password" inputValidate>
<label class="active" for="form10">Type your password</label>
</div>
<div class="md-form form-group">
<a class="btn btn-primary btn-lg waves-light" ripple-radius>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 mdbActive type="email" class="form-control" id="form9" name="email" inputValidate>
<label class="active" 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 mdbActive type="password" class="form-control" id="form10" name="password" inputValidate>
<label class="active" 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 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 MDB Pro component
Basic examples
<div class="form-group">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Classic checkbox</label>
</div>
<div class="form-group">
<input type="checkbox" class="filled-in" id="checkbox2">
<label for="checkbox2">Filled-in checkbox</label>
</div>
Disabled checkboxes
<div class="form-group">
<input type="checkbox" id="checkbox3" disabled checked="checked">
<label for="checkbox3" class="disabled">Classic checkbox</label>
</div>
<div class="form-group">
<input type="checkbox" class="filled-in" id="checkbox4" disabled checked="checked">
<label for="checkbox4" class="disabled">Filled-in checkbox</label>
</div>
Inline checkboxes
<form class="form-inline">
<div class="form-group">
<input type="checkbox" id="checkbox11" checked="checked">
<label for="checkbox11">Classic checkbox</label>
</div>
<div class="form-group">
<input type="checkbox" class="filled-in" id="checkbox22" checked="checked">
<label for="checkbox22">Filled-in checkbox</label>
</div>
<div class="form-group">
<input type="checkbox" id="checkbox33" checked="checked">
<label for="checkbox33">Classic checkbox</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 ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput"
to the .file <input>
and [value]="showFiles()"
to the .file-path <input>
.
<form>
<div class="file-field">
<div class="btn btn-primary btn-sm">
<span>Choose file</span>
<input type="file" ngFileSelect (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>
</form>
Data structure:
import { Component, EventEmitter } from '@angular/core';
import { UploadFile, UploadInput, UploadOutput } from 'your_path_to/typescripts/pro';
import { humanizeBytes } from 'your_path_to/typescripts/pro/file-input';
@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: '/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 {
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">
<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:
import { Component } from '@angular/core';
@Component({
selector: 'range-example',
templateUrl: 'range.html',
})
export class RangeComponent {
range: any = 50;
coverage() {
if(typeof this.range === "string" && this.range.length !== 0) {
return this.range;
}
}
}
Character counter
Use a character counter in fields where a character restriction is in place.
Input field
<div class="md-form">
<input id="input_text" type="text" length="10" charCounter mdbActive>
<label for="input_text">Input text</label>
</div>
Textarea
<div class="md-form">
<textarea class="md-textarea" id="input_text" type="text" length="120" charCounter mdbActive></textarea>
<label for="input_text">Type your text</label>
</div>
Autocomplete MDB Pro 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:
import { Component } from '@angular/core';
@Component({
selector: 'autocomplete-example',
templateUrl: 'autocomplete.html',
})
export class AutocompleteComponent {
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>