Inputs
Bootstrap inputs
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
Bootstrap input is a special field which is used in order to receive data from the user. Used mostly in a variety of web-based forms.
You can use default bootstrap style or the Material Design version.
In case you want to create your custom form, have a look at specific pages of our documentation from the list below or use our Form Builder:
Drag & drop form builder- Predefined forms (Login, Register, Subscription, Contact)
- Autocomplete
- Checkbox
- Contact form - how to send an email
- File input
- Form within modal
- Input
- Multiselect
- Radio button
- Search
- Select
- Slider
- Additional styles & customization
- Switch
- Textarea
- Validation
Default styling for Bootstrap Input component
<!-- Default input -->
<label for="exampleForm2">Default input</label>
<input type="text" id="exampleForm2" class="form-control">
<!-- Material input -->
<div class="md-form">
<input type="text" id="form1" class="form-control">
<label for="form1">Example label</label>
</div>
Examples of use
In that section you can see where you can use a plenty of inputs.
Also check our documentation where inputs are using:
Input fields
Inputs field are fields where you can put your data and you can use different size of inputs.
Default input
<!-- Large input -->
<input class="form-control form-control-lg" type="text" placeholder="Large input">
<!-- Small input -->
<input class="form-control" type="text" placeholder="Medium input">
<!-- Small input -->
<input class="form-control form-control-sm" type="text" placeholder="Small input">
Material input
<!-- Large input -->
<div class="md-form form-lg">
<input type="text" id="inputLGEx" class="form-control form-control-lg">
<label for="inputLGEx">Large input</label>
</div>
<!-- Medium input -->
<div class="md-form">
<input type="text" id="inputMDEx" class="form-control">
<label for="inputMDEx">Medium input</label>
</div>
<!-- Small input -->
<div class="md-form form-sm">
<input type="text" id="inputSMEx" class="form-control form-control-sm">
<label for="inputSMEx">Small input</label>
</div>
Icon Prefixes
<!-- Material input -->
<div class="md-form">
<i class="fas fa-user prefix"></i>
<input type="text" id="inputIconEx2" class="form-control">
<label for="inputIconEx2">E-mail address</label>
</div>
<!-- Material input -->
<div class="md-form">
<i class="fas fa-envelope prefix"></i>
<input type="text" id="inputIconEx1" class="form-control">
<label for="inputIconEx1">E-mail address</label>
</div>
Prefixes Inside
<!-- Material input -->
<div class="md-form input-with-pre-icon">
<i class="fas fa-user input-prefix"></i>
<input type="text" id="prefixInside" class="form-control">
<label for="prefixInside">Example label </label>
</div>
<div class="md-form input-with-post-icon">
<i class="fas fa-user input-prefix"></i>
<input type="text" id="suffixInside" class="form-control">
<label for="suffixInside">Example label </label>
</div>
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.
<!-- Default input -->
<label for="inputDisabledEx2" class="disabled">Example label</label>
<input type="text" id="inputDisabledEx2" class="form-control" disabled>
<!-- Material input -->
<div class="md-form">
<input type="text" id="inputDisabledEx" class="form-control" disabled>
<label for="inputDisabledEx" class="disabled">Example label</label>
</div>
Error or Success Messages
<!-- Material input -->
<div class="md-form">
<i class="fas fa-lock prefix"></i>
<input type="password" id="inputValidationEx2" class="form-control validate">
<label for="inputValidationEx2" data-error="wrong" data-success="right">Type your password</label>
</div>
<!-- Material input -->
<div class="md-form">
<i class="fas fa-envelope prefix"></i>
<input type="email" id="inputValidationEx" class="form-control validate">
<label for="inputValidationEx" data-error="wrong" data-success="right">Type your email</label>
</div>
Placeholder
<!-- Material input -->
<div class="md-form">
<input placeholder="Placeholder" type="text" id="inputPlaceholderEx" class="form-control">
<label for="inputPlaceholderEx">Placeholder</label>
</div>
Pre-filling Text Inputs
Prefill the input with the specified value.
<!-- Material input -->
<div class="md-form">
<input value="John Doe" type="text" id="inputPrefilledEx" class="form-control">
<label for="inputPrefilledEx">Example label</label>
</div>
Input number
Enter a number within certain range with the mouse or keyboard.
Default input
<div class="def-number-input number-input safari_only">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="minus"></button>
<input class="quantity" min="0" name="quantity" value="1" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
</div>
.number-input input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.number-input input[type=number]::-webkit-inner-spin-button,
.number-input input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
display: flex;
justify-content: space-around;
align-items: center;
}
.number-input button {
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
height: 2px;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
text-align: center;
}
.number-input.number-input {
border: 1px solid #ced4da;
width: 10rem;
border-radius: .25rem;
}
.number-input.number-input button {
width: 2.6rem;
height: .7rem;
}
.number-input.number-input button.minus {
padding-left: 10px;
}
.number-input.number-input button:before,
.number-input.number-input button:after {
width: .7rem;
background-color: #495057;
}
.number-input.number-input input[type=number] {
max-width: 4rem;
padding: .5rem;
border: 1px solid #ced4da;
border-width: 0 1px;
font-size: 1rem;
height: 2rem;
color: #495057;
}
@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance: none) and (stroke-color:transparent) {
.number-input.def-number-input.safari_only button:before,
.number-input.def-number-input.safari_only button:after {
margin-top: -.3rem;
}
}
}
Material input
<!-- Material input -->
<div class="md-form">
<input type="number" id="numberExample" class="form-control">
<label for="numberExample">Example label</label>
</div>
Layout
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.
<!-- Default form group -->
<form>
<!-- Default input -->
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<!-- Default input -->
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
<!-- Default form group -->
<!-- Material form group -->
<form>
<!-- Material input -->
<div class="md-form form-group mt-5">
<input 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 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.
<!-- Default form grid -->
<form>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input type="text" class="form-control" placeholder="First name">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input type="text" class="form-control" placeholder="Last name">
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<!-- Default form grid -->
<!-- Material form grid -->
<form>
<!-- Grid row -->
<div class="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 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 type="text" class="form-control" placeholder="First name">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input 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 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 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 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 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 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 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">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<!-- Default input -->
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<!-- Grid row -->
<!-- Default input -->
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<!-- Default input -->
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<!-- Grid row -->
<div class="form-row">
<!-- Default input -->
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity" placeholder="New York City">
</div>
<!-- Default input -->
<div class="form-group col-md-6">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip" placeholder="11206-1117">
</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 a 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 the 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 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 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 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 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 type="text" class="form-control" placeholder="City">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="State">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form">
<input 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 type="text" class="form-control" placeholder="City">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input type="text" class="form-control" placeholder="State">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input 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
are based on their 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 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 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 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 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, that collapse any HTML white space and allowing you to provide alignment controls with spacing and flexbox utilities. - Controls and input groups receive
width: autoto override the Bootstrap defaultwidth: 100%. - Controls only appear inline in viewports that are at least 576px wide so 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 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">
<div class="input-group-prepend">
<span class="input-group-text md-addon">@</span>
</div>
<input type="text" class="form-control mb-2 mr-sm-3" id="inlineFormInputGroupUsername2MD"
placeholder="Username">
</div>
<!-- Checkbox -->
<div class="form-check mb-2 mr-sm-2">
<input 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">Submit</button>
</form>
<!-- Material inline form -->
<!-- Default inline form -->
<form class="form-inline">
<!-- Default input -->
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input 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 type="text" class="form-control py-0" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<!-- Checkbox -->
<div class="form-check mb-2 mr-sm-2">
<input 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 -->
Help text
Block-level help text in forms can be created using
.form-text (previously known as
.help-block in v3). Inline help text can be flexibly implemented using any inline HTML element and
utility classes such as
.text-muted.
Associating help text with form controls
The help text should be explicitly associated with the form control it relates to using the
aria-describedbyattribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses on or enters the control.
Help text below inputs can be styled with
.form-text. This class includes
display: block and adds some top margin for easy spacing from the inputs above it.
<!-- Default input with help text-->
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces,
special characters,
or emoji.
</small>
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces,
special characters,
or emoji.
<!-- Material input with help text -->
<div class="md-form">
<input type="password" id="inputPassword5MD" class="form-control" aria-describedby="passwordHelpBlockMD">
<label for="inputPassword5MD">Password</label>
<small id="passwordHelpBlockMD" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces,
special characters, or emoji.
</small>
</div>
Inline text can use any typical inline HTML element (be it a
<small>,
<span>, or something else) with nothing more than a utility class.
<!-- Default form inline -->
<form class="form-inline">
<!-- Default input with help text -->
<div class="form-group">
<label for="inputPassword6">Password</label>
<input type="password" id="inputPassword6" class="form-control mx-sm-3"
aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Must be 8-20 characters long.
</small>
</div>
<!-- Default input with help text -->
</form>
<!-- Default form inline -->
<!-- Material form inline -->
<form class="form-inline">
<!-- Material input with help text -->
<div class="md-form form-group mt-0">
<input type="password" id="inputPassword6MD" class="form-control mr-sm-3"
aria-describedby="passwordHelpInlineMD">
<label for="inputPassword6MD">Password</label>
<small id="passwordHelpInlineMD" class="text-muted">
Must be 8-20 characters long.
</small>
</div>
<!-- Material input with help text -->
</form>
<!-- Material form inline -->
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-char-counter" type="text" length="10" class="form-control">
<label for="input-char-counter">Input text</label>
</div>
Textarea
<div class="md-form">
<textarea id="textarea-char-counter" class="form-control md-textarea" length="120" rows="3"></textarea>
<label for="textarea-char-counter">Type your text</label>
</div>
Optional initialization
If you are adding a character counter dynamically, you can use the function below to initialize it.
$(document).ready(function() {
$('input#input_text, textarea#textarea1').characterCounter();
});
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">
<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">
<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">
<label for="form-sm">Example label</label>
</div>
Prefix
We'll never share your email with anyone.
<!-- Material outline input with prefix-->
<div class="md-form md-outline">
<i class="fas fa-envelope prefix"></i>
<input type="text" id="inputIconEx1" class="form-control">
<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>
Prefix Inside
<!-- Material outline input with prefix-->
<div class="md-form md-outline input-with-pre-icon">
<i class="fas fa-envelope input-prefix"></i>
<input type="text" id="prefixInside2" class="form-control">
<label for="prefixInside2">E-mail address</label>
</div>
Suffix Inside
<!-- Material outline input with prefix-->
<div class="md-form md-outline input-with-post-icon">
<i class="fas fa-envelope input-prefix"></i>
<input type="text" id="suffixInside2" class="form-control">
<label for="suffixInside2">E-mail address</label>
</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">
<label for="input-char-counter1">Input text</label>
</div>
Disabled
To prevent user interactions add boolean disabled prop.
<!-- Material outline disabled input -->
<div class="md-form md-outline">
<input type="text" id="inputDisabledEx13" class="form-control" disabled>
<label for="inputDisabledEx13" class="disabled">Example label</label>
</div>
Validation
Input types let you specified what data users should provide and help you validate it.
<!-- Outline validation input -->
<div class="md-form md-outline">
<input type="email" id="inputValidationEx67" class="form-control validate">
<label for="inputValidationEx67" data-error="wrong" data-success="right">Type your email</label>
</div>
<!-- Outline validation input -->
<div class="md-form md-outline">
<input type="password" id="inputValidationEx24" class="form-control validate">
<label for="inputValidationEx24" data-error="wrong" data-success="right">Type your password</label>
</div>
Textarea
Textareas allow larger expandable user input. The border should light up simply and clearly indicating which field the user is currently editing.
<!--Material textarea-->
<div class="md-form md-outline">
<textarea id="form75" class="md-textarea form-control" rows="3"></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
Default styling for Bootstrap Input component.
<!-- Material background input -->
<div class="md-form md-bg">
<input type="text" id="formBg1" class="form-control">
<label for="formBg1">Example label</label>
</div>
Long label
<div class="md-form md-bg">
<input type="text" id="form2-00" class="form-control">
<label for="form2-00">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae debitis ipsa rem qui
suscipit dolorum sunt assumenda praesentium autem, voluptas quaerat tempore nostrum veritatis impedit ullam
in fugiat explicabo odit.</label>
</div>
2.0 with Prefix Icon
You can add icons to your inputs. Just use prop icon with icon name.
<div class="md-form md-bg input-with-pre-icon">
<i class="fas fa-user input-prefix"></i>
<input type="text" id="prefixInside4" class="form-control">
<label for="prefixInside4">Example label </label>
</div>
2.0 with Suffix Icon
<div class="md-form md-bg input-with-post-icon">
<i class="fas fa-user input-prefix"></i>
<input type="text" id="form2_0" class="form-control">
<label for="form2_0">Example label </label>
</div>
A fix for default background color of input in the browser
When you use a browser, sometimes you safe your e-mail address and the password on the page. On any website where you have a form and you safed 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;
}
Note: If you need other background and text colors, don't hesitate to create your own color options. Below, you can see whole white form.
