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>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const input1 = ref('');
</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>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
</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>
<script>
  import { MDBInput } from "mdb-vue-ui-kit";

  export default {
    components: {
      MDBInput
    }
  };
</script>
<script setup lang="ts">
  import { MDBInput } from "mdb-vue-ui-kit";
</script>

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>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
</script>

Email

<template>
  <MDBInput label="Email input" type="email" />
</template>
<script>
  import { MDBInput } from 'mdb-vue-ui-kit';

  export default {
    components: {
      MDBInput,
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
</script>

Password

<template>
  <MDBInput label="Password input" type="password" />
</template>
<script>
  import { MDBInput } from 'mdb-vue-ui-kit';

  export default {
    components: {
      MDBInput,
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
</script>

Number

<template>
  <MDBInput label="Number input" type="number" />
</template>
<script>
  import { MDBInput } from 'mdb-vue-ui-kit';

  export default {
    components: {
      MDBInput,
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
</script>

URL

<template>
  <MDBInput label="URL input" type="url" />
</template>
<script>
  import { MDBInput } from 'mdb-vue-ui-kit';

  export default {
    components: {
      MDBInput,
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBTextarea } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
</script>

Helper text

Add helper property with text to the input to create helper text.

Example helper
<template>
  <MDBInput label="Example label" helper="Example helper" />
</template>
<script>
  import { MDBInput } from "mdb-vue-ui-kit";

  export default {
    components: {
      MDBInput
    }
  };
</script>
<script setup lang="ts">
  import { MDBInput } from "mdb-vue-ui-kit";
</script>

Character counter

Add counter property and set the maxlength property to create a counter.

0 / 20
<template>
  <MDBInput counter :maxlength="20" label="Example label" />
</template>
<script>
  import { MDBInput } from "mdb-vue-ui-kit";

  export default {
    components: {
      MDBInput
    }
  };
</script>
<script setup lang="ts">
  import { MDBInput } from "mdb-vue-ui-kit";
</script>

Icons

Trailing icon

Add class trailing to MDBIcon component to create trailing icon in the input. 

<template>
  <MDBInput
    type="text"
    id="form1"
    class="form-icon-trailing"
    label="Example label"
  >
    <MDBIcon icon="exclamation-circle" class="trailing"></MDBIcon>
  </MDBInput>
</template>
<script>
  import { MDBInput, MDBIcon } from "mdb-vue-ui-kit";

  export default {
    components: {
      MDBInput,
      MDBIcon
    }
  };
</script>
<script setup lang="ts">
  import { MDBInput, MDBIcon } from "mdb-vue-ui-kit";
</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>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
</script>

Input fields - API

Import

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

Properties

Input

Property Type Default Description
counter Boolean false Adds character counter as helper text. Must be used with "maxlength" property
helper String "" Adds helper text
label String "" Changes input label
maxlength Number 0 Sets max charactes count for input elementl
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