Input fields

Bootstrap 5 Input fields

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

Required ES init: Input *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

A basic example of the input field consists of the input element with specified ID and label element connected via this ID with the input. Both elements are wrapped in .form-outline class which provides a material design look.

Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input type="text" id="form12" class="form-control" />
  <label class="form-label" for="form12">Example label</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.



Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input type="text" id="formControlLg" class="form-control form-control-lg" />
  <label class="form-label" for="formControlLg">Form control lg</label>
</div>

<div class="form-outline" data-mdb-input-init>
  <input type="text" id="formControlDefault" class="form-control" />
  <label class="form-label" for="formControlDefault">Form control default</label>
</div>

<div class="form-outline" data-mdb-input-init>
  <input type="text" id="formControlSm" class="form-control form-control-sm" />
  <label class="form-label" for="formControlSm">Form control sm</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Disabled

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

Edit in sandbox 
<div class="form-outline mb-3" data-mdb-input-init>
  <input
    class="form-control"
    id="formControlDisabled"
    type="text"
    placeholder="Disabled input"
    aria-label="disabled input example"
    disabled
  />
  <label class="form-label" for="formControlDisabled">Disabled</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input's value.

Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input
    class="form-control"
    id="formControlReadonly"
    type="text"
    value="Readonly input here..."
    aria-label="readonly input example"
    readonly
  />
  <label class="form-label" for="formControlReadonly">Readonly</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Types

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

Text

The input type="text" defines a single-line text field.

Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input type="text" id="typeText" class="form-control" />
  <label class="form-label" for="typeText">Text input</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Email

The input field type="email" defines the email address field. The input value is automatically validated to ensure that it is a properly formatted email address.

Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input type="email" id="typeEmail" class="form-control" />
  <label class="form-label" for="typeEmail">Email input</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Password

The input field type="password" defines a password field, thus hiding characters as confidential information.

Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input type="password" id="typePassword" class="form-control" />
  <label class="form-label" for="typePassword">Password input</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Number

The input type="number" defines field for entering a number.

Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input type="number" id="typeNumber" class="form-control" />
  <label class="form-label" for="typeNumber">Number input</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Phone number

The input type="tel" defines a field for entering a telephone number.

Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input type="tel" id="typePhone" class="form-control" />
  <label class="form-label" for="typePhone">Phone number input</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

URL

The input type="url" defines a field for entering a URL.

Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input type="url" id="typeURL" class="form-control" />
  <label class="form-label" for="typeURL">URL input</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Textarea

The textarea tag defines a multi-line text input control.

Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <textarea class="form-control" id="textAreaExample" rows="4"></textarea>
  <label class="form-label" for="textAreaExample">Message</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

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 styled with .form-text. 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.
Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input type="text" id="formTextExample1" class="form-control" aria-describedby="textExample1" />
  <label class="form-label" for="formTextExample1">Example label</label>
</div>
<div id="textExample1" class="form-text">
  We'll never share your email with anyone else.
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

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.
Edit in sandbox 
<div class="row g-3 align-items-center">
  <div class="form-outline col-auto" data-mdb-input-init>
    <input type="password" id="formTextExample2" class="form-control" aria-describedby="textExample2" />
    <label class="form-label" for="formTextExample2">Password</label>
  </div>
  <div class="col-auto">
    <span id="textExample2" class="form-text"> Must be 8-20 characters long. </span>
  </div>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Helper text

Add class form-helper to div to create helper text.

Example helper
Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input type="text" id="form14" class="form-control" />
  <label class="form-label" for="form14">Example label</label>
  <div class="form-helper">Example helper</div>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Character counter

Add an empty form-helper element, set data-mdb-show-counter="true" and set the maxlength attribute to create a counter.

0 / 20
Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input type="text" id="form16" class="form-control" data-mdb-showcounter="true" maxlength="20" />
  <label class="form-label" for="form16">Example label</label>
  <div class="form-helper"></div>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Icons

Trailing icon

Add class trailing to i tag to create trailing icon in the input.

Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <i class="fas fa-exclamation-circle trailing"></i>
  <input type="text" id="form1" class="form-control form-icon-trailing" />
  <label class="form-label" for="form1">Example label</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

Password Visibility Toggle

Check the box or click the icon to reveal the password, allowing users to verify their input without retyping.

Edit in sandbox 
<!-- Icon example -->
<div class="form-outline mb-3" data-mdb-input-init>
  <i class="far fa-eye trailing fa-fw pe-auto" id="show-password-toggle-icon"></i>
  <input type="password" id="show-password-input-1" class="form-control form-icon-trailing" />
  <label class="form-label" for="show-password-input-1">Example label</label>
</div>

<!-- Checkbox example -->
<!-- Password input -->
<div data-mdb-input-init class="form-outline mb-3">
  <input type="password" id="show-password-input-2" class="form-control" />
  <label class="form-label" for="show-password-input-2">Example label</label>
</div>

<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
  <input class="form-check-input me-2" type="checkbox" value="" id="show-password-toggle-checkbox" />
  <label class="form-check-label" for="show-password-toggle-checkbox">Show password</label>
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

// Icon Example
const passwordInput1 = document.getElementById('show-password-input-1');
const toggleIcon = document.getElementById('show-password-toggle-icon');

toggleIcon.addEventListener('pointerdown', (e) => {
  e.preventDefault();

    // Toggle input type between password and text
    if (passwordInput1.type === 'password') {
      passwordInput1.type = 'text';
      toggleIcon.classList.remove('fa-eye');
      toggleIcon.classList.add('fa-eye-slash');
    } else {
      passwordInput1.type = 'password';
      toggleIcon.classList.remove('fa-eye-slash');
      toggleIcon.classList.add('fa-eye');
    }
  });

// Checkbox example
const passwordInput2 = document.getElementById('show-password-input-2');
const toggleCheckbox = document.getElementById('show-password-toggle-checkbox');

toggleCheckbox.addEventListener('change', () => {
  passwordInput2.type = toggleCheckbox.checked ? 'text' : 'password';
});
// Icon Example
const passwordInput1 = document.getElementById('show-password-input-1');
const toggleIcon = document.getElementById('show-password-toggle-icon');

toggleIcon.addEventListener('pointerdown', (e) => {
  e.preventDefault();

    // Toggle input type between password and text
    if (passwordInput1.type === 'password') {
      passwordInput1.type = 'text';
      toggleIcon.classList.remove('fa-eye');
      toggleIcon.classList.add('fa-eye-slash');
    } else {
      passwordInput1.type = 'password';
      toggleIcon.classList.remove('fa-eye-slash');
      toggleIcon.classList.add('fa-eye');
    }
  });

// Checkbox example
const passwordInput2 = document.getElementById('show-password-input-2');
const toggleCheckbox = document.getElementById('show-password-toggle-checkbox');

toggleCheckbox.addEventListener('change', () => {
  passwordInput2.type = toggleCheckbox.checked ? 'text' : 'password';
});

Updating label width

If any form parent is hidden, after displaying it, update the input to recalculate width of the label using the following code:

Edit in sandbox 
document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new Input(formOutline).update();
});
document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).update();
});

Dynamic input initialization

If the input is dynamically loaded on the page, then after displaying it, the initialization should be performed as in the example below.

Edit in sandbox 
document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new Input(formOutline).init();
});
document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).init();
});

Clear button

Add a button that will be displayed inside the input field when it is not empty and, when used, will clear the content of the field.

✕
Edit in sandbox 
<div class="form-outline" style="width: 22rem;" data-mdb-input-init>
  <input type="text" id="form20" class="form-control form-icon-trailing" />
  <label class="form-label" for="form20">Example label</label>
  <span class="trailing pe-auto clear d-none" tabindex="0">✕</span>
</div>
.trailing.clear {
  cursor: pointer;

  &:focus {
    color: #3b71ca;
    outline: none;
  }
}
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

const clearButton = document.querySelector('.trailing.clear');
const form20 = document.querySelector("#form20");

const showElement = (element) => {
  if (element.classList.contains('d-none')) {
    element.classList.remove('d-none');
  }
}

const hideElement = (element) => {
  if (!element.classList.contains('d-none')) {
    element.classList.add('d-none');
  }
}

const clearInput = (button) => {
  const evt = document.createEvent("HTMLEvents");
  evt.initEvent("blur", false, true);

  const input = button.parentNode.querySelector(".form-icon-trailing");
    input.value = null;
    input.dispatchEvent(evt);
    hideElement(button);
}

clearButton.addEventListener('click', () => clearInput(clearButton));
clearButton.addEventListener('keydown', (event) => {
  if (event.code === "Enter") {
    event.preventDefault();
    clearButton.click();
  }
});

form20.addEventListener('input', () => {
  if (form20.value !== null) {
    showElement(clearButton);
  }
});
const clearButton = document.querySelector('.trailing.clear');
const form20 = document.querySelector("#form20");

const showElement = (element) => {
  if (element.classList.contains('d-none')) {
    element.classList.remove('d-none');
  }
}

const hideElement = (element) => {
  if (!element.classList.contains('d-none')) {
    element.classList.add('d-none');
  }
}

const clearInput = (button) => {
  const evt = document.createEvent("HTMLEvents");
  evt.initEvent("blur", false, true);

  const input = button.parentNode.querySelector(".form-icon-trailing");
    input.value = null;
    input.dispatchEvent(evt);
    hideElement(button);
}

clearButton.addEventListener('click', () => clearInput(clearButton));
clearButton.addEventListener('keydown', (event) => {
  if (event.code === "Enter") {
    event.preventDefault();
    clearButton.click();
  }
});

form20.addEventListener('input', () => {
  if (form20.value !== null) {
    showElement(clearButton);
  }
});