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

Example label


<div class="md-form">
    <input type="text" id="form1" class="form-control">
    <label for="form1" class="">Example label</label>
</div>

Small input

Example label


<div class="md-form form-sm">
    <input type="text" id="form1" class="form-control">
    <label for="form1" class="">Example label</label>
</div>

Icon Prefixes

Example label


<div class="md-form">
    <i class="fa fa-envelope prefix"></i>
    <input type="text" id="form2" class="form-control">
    <label for="form2">Example label</label>
</div>

Placeholder

Example label


<div class="md-form">
    <input placeholder="Placeholder" type="text" id="form5" class="form-control">
    <label for="form5">Example label</label>
</div>

Prefilling Text Inputs

Example label


<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

Type your email

Type your password

                               
<!--Email validation-->
<div class="md-form">
    <i class="fa fa-envelope prefix"></i>
    <input type="email" id="form9" class="form-control validate">
    <label for="form9" data-error="wrong" data-success="right">Type your email</label>
</div>

<!--Password validation-->
<div class="md-form">
    <i class="fa fa-lock prefix"></i>
    <input type="password" id="form10" class="form-control validate">
    <label for="form10" data-error="wrong" data-success="right">Type your password</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.

Example label


<div class="md-form">
    <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 type="email" id="form91" class="form-control validate">
        <label for="form91" data-error="wrong" data-success="right">Type your email</label>
    </div>

    <div class="md-form form-group">
        <i class="fa fa-lock prefix"></i>
        <input type="password" id="form92" class="form-control validate">
        <label for="form92" data-error="wrong" data-success="right">Type your password</label>
    </div>

    <div class="md-form form-group">
        <a href="" class="btn btn-primary btn-lg">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.

Type your email

Type your password

Basic textarea

Example label


<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 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 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 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 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 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 type="text" id="form61" class="form-control">
                <label for="form61" class="">Example label</label>
            </div>
        </div>

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

Textarea

Basic textarea

Icon Prefix


<!--Basic textarea-->
<div class="md-form">
    <textarea 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 type="text" id="form8" class="md-textarea"></textarea>
    <label for="form8">Icon Prefix</label>
</div>

Checkboxes Premium component

Basic examples:

Classic checkbox

Filled-in checkbox


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

Classic checkbox

Filled-in checkbox


<fieldset class="form-group">
    <input type="checkbox" id="checkbox3" disabled>
    <label for="checkbox3" class="disabled">Classic checkbox</label>
</fieldset>

<fieldset class="form-group">
    <input type="checkbox" class="filled-in" id="checkbox4" 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">
        <label for="checkbox11">Classic checkbox</label>
    </fieldset>

    <fieldset class="form-group">
        <input type="checkbox" class="filled-in" id="checkbox22">
        <label for="checkbox22">Filled-in checkbox</label>
    </fieldset>

    <fieldset class="form-group">
        <input type="checkbox" id="checkbox13">
        <label for="checkbox13">Classic checkbox</label>
    </fieldset>

</form>

Radio buttons Premium component

Basic examples:

Option 1

Option 2

Option 3


<fieldset class="form-group">
    <input name="group1" type="radio" id="radio1">
    <label for="radio1">Option 1</label>
</fieldset>

<fieldset class="form-group">
    <input name="group1" type="radio" id="radio2">
    <label for="radio2">Option 2</label>
</fieldset>

<fieldset class="form-group">
    <input name="group1" type="radio" id="radio3">
    <label for="radio3">Option 3</label>
</fieldset>

Radio buttons with gap:

Option 1

Option 2

Option 3


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

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

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

Inline radio buttons


<form class="form-inline">

    <fieldset class="form-group">
        <input name="group1" type="radio" id="radio11" checked="checked">
        <label for="radio11">Option 1</label>
    </fieldset>

    <fieldset class="form-group">
        <input name="group1" type="radio" id="radio21">
        <label for="radio21">Option 2</label>
    </fieldset>

    <fieldset class="form-group">
        <input name="group1" type="radio" id="radio31">
        <label for="radio31">Option 3</label>
    </fieldset>

</form>

Switch Premium component

Basic example:

Off On

Disabled:

Off On


<!-- 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:


<form>
    <div class="file-field">
        <div class="btn btn-primary btn-sm">
            <span>Choose file</span>
            <input type="file">
        </div>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>

Multiple files:

For uploading multiple files add a multiple attribute to the input.


<form action="#">
    <div class="file-field">
        <div class="btn btn-primary btn-sm">
            <span>Choose files</span>
            <input type="file" multiple>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>

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">
    <input type="range" min="0" max="100" />
</form>

Character counter Premium component

Use a character counter in fields where a character restriction is in place.

Input field:

Input text


<input id="input_text" type="text" length="10">
<label for="input_text">Input text</label>

Textarea:

Type your text


<textarea id="textarea1" class="md-textarea" length="120"></textarea>
<label for="textarea1">Type your text</label>

Optional initialization

If you are adding character counter dynamically, you can use the function below to initialize it.


$(document).ready(function() {
    $('input#input_text, textarea#textarea1').characterCounter();
});

Google Maps

Follow 2 simple steps below to add a Google Maps to your project.

Step 1: Add a map-container to your project and set it a height (in the example below we set it to 300px.

The .z-dept-1 class is optional and adds a shadow box to the container.


<div id="map-container" class="z-depth-1" style="height: 300px"></div>

Step 2: Link a Google Maps script in your project.


<!--Google Maps-->
<script src="https://maps.google.com/maps/api/js"></script>

Step 3: Set your position and zoom by adding a code below to your project and editing your data.

Here we set our Localization to New York (40.725118, -73.997699) and the Map Zoom to 14


function init_map() {
    
    var var_location = new google.maps.LatLng(40.725118, -73.997699);

    var var_mapoptions = {
        center: var_location,
    
        zoom: 14
    };

    var var_marker = new google.maps.Marker({
        position: var_location,
        map: var_map,
        title: "New York"
    });

    var var_map = new google.maps.Map(document.getElementById("map-container"),
        var_mapoptions);

    var_marker.setMap(var_map);

}

google.maps.event.addDomListener(window, 'load', init_map);

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

Your URL

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:

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" type="button">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" type="button">Go!</button>
    </span>
</div>

<!--Both sides-->
<div class="md-form input-group">
    <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="button">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" type="button">Love it</button>
    </span>
</div>

Accessibility:

Screen readers will have trouble with your forms if you don’t include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.

The exact technique to be used (<label> elements hidden using the .sr-only class, or use of the aria-label, aria-labelledby, aria-describedby, title or placeholder attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you’re implementing. The examples in this section provide a few suggested, case-specific approaches.

Autocomplete Premium component

What is your favorite US state?


<div class="md-form">
    <input type="search" id="form-autocomplete" class="form-control mdb-autocomplete">
    <button class="mdb-autocomplete-clear">
        <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
            <path d="M0 0h24v24H0z" fill="none" />
        </svg>
    </button>
    <label for="form-autocomplete" class="active">What is your favorite US state?</label>
</div>


var states = [
    "Alabana",
    "Alaska",
    "Arizona",
    "Arkansas",
    "California",
    ...
];

$('.mdb-autocomplete').mdb_autocomplete({
    data: states
});

Alternate Version


<div class="md-form">
    <input type="text" class="input-alternate" placeholder="John Doe">
</div>

Select

Select documentation