Vue 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 size="sm" label="Example label" />
<mdinput size="sm" label="Example label" icon="envelope" />
<!-- Default input -->
<label for="exampleForm2">Default input</label>
<input type="text" id="exampleForm2" class="form-control">

Sizing

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



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

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

Numeric input

                
<numeric-input :max="10" :emptyValue="5" minus />
<numeric-input :min="0" :max="10" :precision="1" :emptyValue="5.3" />
<numeric-input :min="0" :max="10" placeholder="placeholder" />
                
            

Checkboxes MDB Pro component

Basic examples

                            
<MdInput type="checkbox" id="checkbox1" label="Default checkbox" />
<MdInput type="checkbox" id="checkbox2" label="Filled-in checkbox" filled/>
                            
                            

Disabled checkboxes

                            
<MdInput type="checkbox" id="checkbox3" label="Default checkbox" disabled/>
<MdInput type="checkbox" id="checkbox4" label="Filled-in checkbox" filled disabled/>
                            
                            

Inline checkboxes

                            
<form-inline>
  <MdInput type="checkbox" id="checkbox5" label="Default checkobox" />
  <MdInput type="checkbox" id="checkbox6" label="Filled-in checkobox" filled/>
  <MdInput type="checkbox" id="checkbox7" label="Default checkobox" />
</form-inline>
                            
                            

Radio buttons MDB Pro component

Basic examples

                            
<MdInput type="radio"
         @click.native="toggleRadio1"
         :checked="radio1 === 1"
         label="Option 1"></MdInput>
<MdInput type="radio"
         @click.native="toggleRadio2"
         :checked="radio1 === 2"
         label="Option 2"></MdInput>
<MdInput type="radio"
         @click.native="toggleRadio3"
         :checked="radio1 === 3"
         label="Option 3"></MdInput>
                            
                            

Radio buttons with gap

                            
<MdInput type="radio"
         gap
         :checked="radio2 === 1"
         @click.native="toggleRadio4"
         label="Option 1"></MdInput>
<MdInput type="radio"
         gap
         @click.native="toggleRadio5"
         :checked="radio2 === 2"
         label="Option 2"></MdInput>
<MdInput type="radio"
         gap
         @click.native="toggleRadio6"
         :checked="radio2 === 3"
         label="Option 3"></MdInput>
                            
                            

Inline radio buttons

                            
<form-inline>
  <MdInput type="radio"
           :checked="radio3 === 1"
           @click.native="toggleRadio7"
           label="Option 1"></MdInput>
  <MdInput type="radio"
           @click.native="toggleRadio8"
           :checked="radio3 === 2"
           label="Option 2"></MdInput>
  <MdInput type="radio"
           @click.native="toggleRadio9"
           :checked="radio3 === 3"
           label="Option 3"></MdInput>
</form-inline>
                            
                            

Switch MDB Pro component


Disabled:
                
<md-switch />
                
            

File input MDB Pro component

Basic example

Choose file
                            
<file-input />
                            
                            

Multiple files

For uploading multiple files add a multiple attribute to the input

Choose files
                            
<file-input multiple btnColor="teal"></file-input>
                            
                            

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.

                        
<range-input :min="0" :max="100" :value="50"></range-input>