Input fields
Bootstrap 5 Input fields
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 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">
<input type="text" id="form12" class="form-control" />
<label class="form-label" for="form12">Example label</label>
</div>
Sizing
Set heights using classes like .form-control-lg and
.form-control-sm.
<div class="form-outline">
<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">
<input type="text" id="formControlDefault" class="form-control" />
<label class="form-label" for="formControlDefault">Form control default</label>
</div>
<div class="form-outline">
<input type="text" id="formControlSm" class="form-control form-control-sm" />
<label class="form-label" for="formControlSm">Form control sm</label>
</div>
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">
<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>
Readonly
Add the readonly boolean attribute on an input to prevent modification of the input's value.
<div class="form-outline">
<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>
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">
<input type="text" id="typeText" class="form-control" />
<label class="form-label" for="typeText">Text input</label>
</div>
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">
<input type="email" id="typeEmail" class="form-control" />
<label class="form-label" for="typeEmail">Email input</label>
</div>
Password
The input field type="password" defines a password field, thus hiding characters as confidential information.
<div class="form-outline">
<input type="password" id="typePassword" class="form-control" />
<label class="form-label" for="typePassword">Password input</label>
</div>
Number
The input type="number" defines field for entering a number.
<div class="form-outline">
<input type="number" id="typeNumber" class="form-control" />
<label class="form-label" for="typeNumber">Number input</label>
</div>
Phone number
The input type="tel" defines a field for entering a telephone number.
<div class="form-outline">
<input type="tel" id="typePhone" class="form-control" />
<label class="form-label" for="typePhone">Phone number input</label>
</div>
URL
The input type="url" defines a field for entering a URL.
<div class="form-outline">
<input type="url" id="typeURL" class="form-control" />
<label class="form-label" for="typeURL">URL input</label>
</div>
Textarea
The textarea tag defines a multi-line text input control.
<div class="form-outline">
<textarea class="form-control" id="textAreaExample" rows="4"></textarea>
<label class="form-label" for="textAreaExample">Message</label>
</div>
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">
<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>
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">
<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>
Helper text
Add class form-helper to div to create helper text.
<div class="form-outline">
<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>
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">
<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>
Icons
Trailing icon
Add class trailing to i tag to create trailing icon in the input.
<div class="form-outline">
<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>
Dark background
When placing an input on the dark background add .form-white class next to
.form-outline to provide proper contrast.
<div class="form-outline form-white">
<input type="text" id="formWhite" class="form-control" />
<label class="form-label" for="formWhite">Example label</label>
</div>
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 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 mdb.Input(formOutline).init();
});