Bootstrap inputs

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 material design version or default bootstrap style.

Basic example

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

Input fields

Sizing

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



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

Icon Prefixes

<!-- Material input -->
<div class="md-form">
    <i class="fa fa-envelope prefix"></i>
    <input type="text" id="inputIconEx1" class="form-control">
    <label for="inputIconEx1">E-mail address</label>
</div>
<!-- Material input -->
<div class="md-form">
    <i class="fa fa-user prefix"></i>
    <input type="text" id="inputIconEx2" class="form-control">
    <label for="inputIconEx2">E-mail address</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>

Prefilling Text Inputs

<!-- Material input -->
<div class="md-form">
    <input value="John Doe" type="text" id="inputPrefilledEx" class="form-control">
    <label for="inputPrefilledEx">Example label</label>
</div>

Error or Success Messages

<!-- Material input -->
<div class="md-form">
    <i class="fa 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>
<!-- Material input -->
<div class="md-form">
    <i class="fa 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>

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.

<!-- Material input -->
<div class="md-form">
    <input type="text" id="inputDisabledEx" class="form-control" disabled>
    <label for="inputDisabledEx" class="disabled">Example label</label>
</div>
<!-- Default input -->
<label for="inputDisabledEx2" class="disabled">Example label</label>
<input type="text" id="inputDisabledEx2" class="form-control" disabled>

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.

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.

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

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.

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

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">
                <input type="text" class="form-control" placeholder="First name">
            </div>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col">
            <!-- Material input -->
            <div class="md-form">
                <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 the 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 that 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 itself based on the 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, collapsing any HTML white space and allowing you to provide alignment control with spacing and flexbox utilities.
  • Controls and input groups receive width: auto to override the Bootstrap default width: 100%.
  • Controls only appear inline in viewports that are at least 576px wide 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 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="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 mb-0">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 -->

Textarea

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

<!--Textarea with icon prefix-->
<div class="md-form">
    <i class="fa fa-pencil prefix"></i>
    <textarea type="text" id="textareaPrefix" class="form-control md-textarea" rows="3"></textarea>
    <label for="textareaPrefix">Icon Prefix</label>
</div>
<!-- Default textarea -->
<div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
</div>

A fully material design experience requires potential for textarea to auto-resize, depending on the amount of content within. It is achieved using .md-textarea-auto.

<!-- Auto-resizing textarea -->
<div class="md-form">
    <textarea type="text" id="text2" class="md-textarea md-textarea-auto form-control" rows="2"></textarea>
    <label for="text2">Auto-resizing textarea</label>
</div></code>

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 like .text-muted.

Associating help text with form controls

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses 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.

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>
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<!-- 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>

Inline text can use any typical inline HTML element (be it a <small>, <span>, or something else) with nothing more than a utility class.

Must be 8-20 characters long.
<!-- 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 -->
Must be 8-20 characters long.
<!-- 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 -->

Checkboxes MDB Pro component

Basic examples

<!-- Default checkbox -->
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheckbox1">
    <label class="form-check-label" for="defaultCheckbox1">
        Default checkbox
    </label>
</div>

<!-- Filled-in checkbox -->
<div class="form-check">
    <input class="form-check-input filled-in" type="checkbox" value="" id="filledInCheckbox1">
    <label class="form-check-label" for="filledInCheckbox1">
        Filled-in checkbox
    </label>
</div>

Disabled checkboxes

<!-- Default checkbox -->
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultDisabledCheckbox1" disabled>
    <label class="form-check-label" for="defaultDisabledCheckbox1">
        Default checkbox
    </label>
</div>

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

Inline checkboxes


<!-- Inline form with checkboxes -->
<form class="form-inline">

    <!-- Default checkbox -->
    <div class="form-check mr-3">
        <input class="form-check-input" type="checkbox" id="inlineFormCheckbox1" checked="checked">
        <label class="form-check-label" for="inlineFormCheckbox1">Classic checkbox</label>
    </div>

    <!-- Filled-in checkbox -->
    <div class="form-check mr-3">
        <input type="checkbox" class="filled-in form-check-input" id="inlineFormCheckbox2" checked="checked">
        <label class="form-check-label" for="inlineFormCheckbox2">Filled-in checkbox</label>
    </div>

    <!-- Default checkbox -->
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="inlineFormCheckbox3" checked="checked">
        <label class="form-check-label" for="inlineFormCheckbox3">Classic checkbox</label>
    </div>

</form>
<!-- Inline form with checkboxes -->
            

Radio buttons MDB Pro component

Basic examples

<div class="form-check mb-4">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
        Option 1
    </label>
</div>
<div class="form-check mb-4">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
        Option 2
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3">
    <label class="form-check-label" for="exampleRadios3">
        Option 3
    </label>
</div>

Radio buttons with gap


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

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

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

Inline radio buttons

<!-- Form inline with radios -->
<form class="form-inline">

    <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline1" value="option1" checked>
        <label class="form-check-label" for="exampleRadiosInline1">
            Option 1
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline2" value="option2">
        <label class="form-check-label" for="exampleRadiosInline2">
            Option 2
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline3" value="option3">
        <label class="form-check-label" for="exampleRadiosInline3">
            Option 3
        </label>
    </div>

</form>
<!-- Form inline with radios -->

Switch MDB Pro component


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

Choose file
<form>
    <div class="md-form">
        <div class="file-field">
            <div class="btn btn-primary btn-sm float-left">
                <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>
    </div>
</form>

Multiple files

For uploading multiple files add a multiple attribute to the input

Choose files
<form action="#">
    <div class="md-form">
        <div class="file-field">
            <div class="btn btn-primary btn-sm float-left">
                <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>
    </div>
</form>

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

Character counter

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 character counter dynamically, you can use the function below to initialize it.

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