Rate this docs

Vue Bootstrap Inputs

Vue Inputs - Bootstrap 4 & Material Design

Vue 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.

Binding value

Vue Input behaves just like a regular input - bind the value with v-model or listen to the input and change events it emits.


Default input

Default styling for Bootstrap Input component


            <div class="form-group">
              <label for="example1">Default input</label>
              <input type="text" id="example1" class="form-control">
            </div>
          

Material input

Material Design styling for Bootstrap Input component


            <mdb-input label="Material input" />
          

Input sizing

Inputs are provided in 3 sizes: small - sm, medium (default) - md and large - lg. Use prop size to monipualte them.

Default input


              <div class="form-group">
                <label for="example1">Large input</label>
                <input type="text" id="example1" class="form-control form-control-lg">
              </div>
              <div class="form-group">
                <label for="example2">Medium input</label>
                <input type="text" id="example2" class="form-control form-control-md">
              </div>
              <div class="form-group">
                <label for="example3">Small input</label>
                <input type="text" id="example3" class="form-control form-control-sm">
              </div>
            

Material input


            <mdb-input label="Large input" size="lg" />
            <mdb-input label="Medium input" size="md" />
            <mdb-input label="Small input" size="sm" />
          

Icon prefixes

You can add icons to your inputs. Just use prop icon with icon name.

Default input


              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="basic-addon">
                    <i class="fa fa-user prefix"></i>
                  </span>
                </div>
                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon">
              </div>
            

Material input


            <mdb-input label="Username" icon="user" />
          

Placeholder

To describe what the input stands for we use labels or placeholders. To set placeholder use it as a prop.

Default input


              <div class="form-group">
                <input type="email" class="form-control" placeholder="Your e-mail" />
              </div>
            

Material input


            <mdb-input type="email" placeholder="Your e-mail" />
          

Label

Label set up is the same as placeholder's. Jus set appropriate prop label.

Default input


              <div class="form-group">
                <label for="exampleInput">Your e-mail</label>
                <input type="email" id="exampleInput" class="form-control" />
              </div>
            

Material input


            <mdb-input type="email" placeholder="Your e-mail" />
          

Disabled

To prevent user interaqctions add boolean disabled prop.

Default input


              <div class="form-group">
                <label for="exampleDisabled" class="disabled">Disabled input</label>
                <input type="text" id="exampleDisabled" class="form-control" placeholder="Disabled input" disabled>
              </div>
            

Material input


            <mdb-input placeholder="Disabled input" label="Disabled input" disabled />
          

Input - API

In this section you will find advanced information about the Input component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use to work with it.


Import statement


          import { mdbInput } from 'mdbvue';
      

API Reference: Properties

Name Type Default Description Example
active Boolean false Focus input when the page loads <mdb-input active ... />
basic Boolean false Sets default design <mdb-input basic ... />
class String Override or extend the styles applied to the component. <mdb-input class="example-class" ... />
disabled Boolean false Disables input component <mdb-input disabled ... />
id String The id of the input element. Required <mdb-input required ... />
icon String Adds icon on the left site of the input <mdb-input icon="envelope" ... />
label String Add description to the component label <mdb-input label="Example label" ... />
name String Add name of the input element <mdb-input name="name" ... />
placeholder String Add content to the component placeholder <mdb-input placeholder="Example placeholder" ... />
required Boolean false Determines that the input has to have value <mdb-input required ... />
type String text The input component type atribute <mdb-input type="text" ... />

API Reference: Events

Name Description Example
v-on:input Used to listen to input event, returns Event <mdb-input @input="hanelOnInput" />
v-on:change Emitted on input's native change event, meaning when the field looses focus, but also then the value is changed dynamically. <mdb-input @change="hanelOnChange" />

API Reference: Directives

Name Description Example
v-model Vue.js's directive for emulating input element's two-way data binding. It is syntactic sugar for chaining together value prop and input event listener. <mdb-input v-model="inputText" />

Inputs - examples & customization


A form within a card

Sign up


        <template>
          <mdb-card>
            <mdb-card-body>
              <mdb-card-title class="text-center">Sign up</mdb-card-title>
              <form class="grey-text">
                <mdb-input type="text" @input="handleInput" id="name" label="Your name" icon="user" />
                <mdb-input type="email" @input="handleInput" id="email" label="Your email" icon="envelope" />
                <mdb-input type="email" @input="handleInput" id="confEmail" label="Confirm your email" icon="exclamation-triangle" />
                <mdb-input type="password" @input="handleInput" id="passwd" label="Your password" icon="lock" />
              </form>
              
              <div class="text-center py-4 mt-3">
                <mdb-btn color="cyan">Register</mdb-btn>
              </div>
            </mdb-card-body>
          </mdb-card>
        </template>

        <script>
          import { mdbInput, mdbCard, mdbCardBody, mdbCardTitle, mdbBtn } from "mdbvue";

          export default {
            name: "CardForm",
            components: {
              mdbBtn,
              mdbCard,
              mdbCardBody,
              mdbCardTitle,
              mdbInput
            },
            methods: {
              handleInput(val) {
                console.log(val);
              }
            }
          };
        </script>