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.

Material input value

Material input uses $emit inside component. To handle input value changes use @input event instead of v-model.

Use @change for material checboxes.


Input fields

Basic example

<mdb-input size="sm" label="Example label" />
<mdb-input size="sm" label="Example label" icon="envelope" />
<!-- Default input -->
<label for="exampleForm2">Default input</label>
<input type="text" id="exampleForm2" class="form-control">

Sizing

<mdb-input size="sm" label="Example label" />
<mdb-input 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

<mdb-input label="Example label" icon="envelope" />

Placeholder

<mdb-input label="Example label" placeholder="Placeholder" />

Disabled input

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

<mdb-input 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">
          <mdb-input label="Type your email" icon="envelope" />
        </column>

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

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

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

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

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

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

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

Textarea

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

<!--Textarea with icon prefix-->
<md-textarea 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

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

Disabled checkboxes

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

Inline checkboxes

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

Radio buttons MDB Pro component

Basic examples

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

Radio buttons with gap

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

Inline radio buttons

                            
<form-inline>
  <mdb-input type="radio"
           :checked="radio3 === 1"
           @click.native="toggleRadio7"
           label="Option 1"></mdb-input>
  <mdb-input type="radio"
           @click.native="toggleRadio8"
           :checked="radio3 === 2"
           label="Option 2"></mdb-input>
  <mdb-input type="radio"
           @click.native="toggleRadio9"
           :checked="radio3 === 3"
           label="Option 3"></mdb-input>
</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>