Input fields
Bootstrap 5 Input fields
Input fields refer specifically to the text input fields, which are used to obtain data from the users.
*
*
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.
<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
.
<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.
<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.
<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.
<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 });
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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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 });
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:
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.
document.querySelectorAll('.form-outline').forEach((formOutline) => {
new Input(formOutline).init();
});
document.querySelectorAll('.form-outline').forEach((formOutline) => {
new mdb.Input(formOutline).init();
});