Input fields

Vue Bootstrap 5 Input fields

Vue Input fields refer specifically to the text input fields, which are used to obtain data from the users.


Basic example

A basic example of the input field consists of the MDBInput component with specified label property and v-model directive for creating two-way data bindings.


          <template>
            <MDBInput label="Example label" v-model="input1" />
          </template>
        

          <script>
            import { MDBInput } from 'mdb-vue-ui-kit';
            import { ref } from 'vue';

            export default {
              components: {
                MDBInput,
              },
              setup() {
                const input1 = ref('');

                return {
                  input1,
                };
              },
            };
          </script>
        

Sizing

Set heights using size property like size="lg" or size="sm".




          <template>
            <MDBInput label="Form control lg" size="lg" />
            <MDBInput label="Form control default" />
            <MDBInput label="Form control sm" size="sm" />
          </template>
        

          <script>
            import { MDBInput } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBInput,
              },
            };
          </script>
        

Disabled

Add the disabled boolean attribute on a component to give it a grayed out appearance and remove pointer events.


          <template>
            <MDBInput label="Disabled" disabled aria-label="disabled input example" />
          </template>
        

          <script>
            import { MDBInput } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBInput,
              },
            };
          </script>
        

Readonly

Add the readonly boolean attribute on a component to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.


          <template>
            <MDBInput label="Readonly" readonly />
          </template>
        

          import { MDBInput } from "mdb-vue-ui-kit"; export default { components: { MDBInput } };
        

Types

Input types let you specified what data users should provide and help you validate it.

Text


            <template>
              <MDBInput label="Text input" type="text" />
            </template>
          

            <script>
              import { MDBInput } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBInput,
                },
              };
            </script>
          

Email


            <template><MDBInput label="Email input" type="email" /></template>
          

            <script>
              import { MDBInput } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBInput,
                },
              };
            </script>
          

Password


            <template><MDBInput label="Password input" type="password" /></template>
          

            <script>
              import { MDBInput } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBInput,
                },
              };
            </script>
          

Number


            <template><MDBInput label="Number input" type="number" /></template>
          

            <script>
              import { MDBInput } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBInput,
                },
              };
            </script>
          

Phone number


            <template><MDBInput label="Phone number input" type="tel" /></template>
          

            <script>
              import { MDBInput } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBInput,
                },
              };
            </script>
          

URL


            <template><MDBInput label="URL input" type="url" /></template>
          

            <script>
              import { MDBInput } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBInput,
                },
              };
            </script>
          

Textarea


            <template><MDBTextarea label="Message" rows="4" v-model="textareaValue" /></template>
          

            <script>
              import { MDBTextarea } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBTextarea,
                },
              };
            </script>
          

Text

Block-level or inline-level form text can be created using .form-text.

Associating form text with form controls
Form text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.

Form text below inputs can be added with formText property. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.

We'll never share your email with anyone else.

          <template>
            <MDBInput
              label="Example label"
              aria-describedby="textExample1"
              formText="We'll never share your email with anyone else."
            />
          </template>
        

          <script>
            import { MDBInput } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBInput,
              },
            };
          </script>
        

Inline text can use any typical inline HTML element (be it a <span>, <small>, or something else) with nothing more than the .form-text class.

Must be 8-20 characters long.

          <template>
            <div class="row g-3 align-items-center">
              <MDBInput
                wrapperClass="col-auto"
                label="Password"
                id="formTextExample2"
                aria-describedby="textExample2"
              />
              <div class="col-auto">
                <span id="textExample2" class="form-text"> Must be 8-20 characters long. </span>
              </div>
            </div>
          </template>
        

          <script>
            import { MDBInput } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBInput,
              },
            };
          </script>
        

Dark background

When placing an input on the dark background add white propery to provide proper contrast.


          <template><MDBInput label="Example label" white /></template>
        

          <script>
            import { MDBInput } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBInput,
              },
            };
          </script>
        

Input fields - API


Import


        <script>
          import {
            MDBInput, MDBTextarea
          } from 'mdb-vue-ui-kit';
        </script>
      

Properties

Input

Property Type Default Description
label String "" Changes input label
size String "" Changes input size
wrapperClass String "" Changes input wrapper classes
formText String "" Changes input additional text
white Boolean false Changes input skin to dark
tag String "div" Changes input wrapper tag
v-model String | Number "" Changes input value with two-way data binding
required Boolean "" Adds required attribute to input element
validationEvent Boolean Add validation on given event to element
isValidated Boolean false Marks element as validated.
isValid Boolean "" Sets element as valid or invalid
validFeedback String "" Sets valid status feedback for validated element
invalidFeedback String "" Sets invalid status feedback for validated element
tooltipFeedback Boolean false Display validation feedback in a styled tooltip

Textarea

Property Type Default Description
label String "" Changes textarea label
size String "" Changes textarea size
wrapperClass String "" Changes textarea wrapper classes
formText String "" Changes textarea additional text
white Boolean false Changes textarea skin to dark
tag String "div" Changes textarea wrapper tag
rows String | Number 4 Changes textarea rows number
v-model String | Number "" Changes textarea value with two-way data binding
required Boolean "" Adds required attribute to textarea element
validationEvent Boolean Add validation on given event to element
isValidated Boolean false Marks element as validated.
isValid Boolean "" Sets element as valid or invalid
validFeedback String "" Sets valid status feedback for validated element
invalidFeedback String "" Sets invalid status feedback for validated element
tooltipFeedback Boolean false Display validation feedback in a styled tooltip