Sign in


Sign up


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

                            
<mdinput label="Example label" />
                            

Small input

                            
<mdinput size="sm" label="Example label" />
<mdinput size="sm" label="Example label" icon="envelope" />
                            

Icon Prefixes

                
<mdinput label="Example label" icon="envelope" />
            

Placeholder

                            
<mdinput label="Example label" placeholder="Placeholder" />
                            

Disabled input

Add the disabled boolean attribute on an input to prevent user interactions.

                            
<mdinput label="Example label" 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.

Using the Grid

For more structured form layouts, you can utilize Bootstrap’s predefined grid classes (or mixins). Add to form groups and use to specify the width of your labels and controls.

                            
<form>
    <!--First row-->
    <row>
        <!--First column-->
        <column md="6">
          <mdinput label="Type your email" icon="envelope" />
        </column>

        <!--Second column-->
        <column md="6">
            <mdinput type="password" label="Type your password" icon="lock" />
        </column>
    </row>
    <!--/.First row-->

    <!--Second row-->
    <row>
        <!--First column-->
        <column md="12">
          <mdtextarea label="Basic textarea"/>
        </column>
    </row>
    <!--/.Second row-->

    <!--Third row-->
    <row>

        <!--First column-->
        <column md="4">
            <mdinput label="Example label" />
        </column>

        <!--Second column-->
        <column md="4">
            <mdinput label="Example label" />
        </column>

        <!--Third column-->
        <column md="4">
            <mdinput label="Example label" />
        </column>

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

Textarea

                
<!--Basic textarea-->
<mdtextarea label="Basic textarea"/>

<!--Textarea with icon prefix-->
<mdtextarea label="Icon Prefix" icon="pencil"/>