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.

Input value

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


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 type="text" @input="handleInput" id="exampleInput" label="Material input" basic />
          

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 type="text" @input="handleInput" id="exampleInput" label="Large input" size="lg" />
            <mdb-input type="text" @input="handleInput" id="exampleInput" label="Medium input" size="md" />
            <mdb-input type="text" @input="handleInput" id="exampleInput" 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 type="text" @input="handleInput" id="exampleInput" 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" @input="handleInput" id="exampleInput" 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" @input="handleInput" id="exampleInput" 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 type="text" id="inputDisabled" 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: Methods

Name Parameters Description Example
v-on:input value Returns input value. Use this method instead of v-model to handle input value changes. <mdb-input @input="hanelOnInput" />

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>