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.

Edit in sandbox 
        
            
          <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.



Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <div class="form-outline mb-3" style="width: 22rem;">
            <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
            <div class="form-outline">
              <input type="text" id="typeText" class="form-control" />
              <label class="form-label" for="typeText">Text input</label>
            </div>

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">
              <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.

Edit in sandbox 
        
            
            <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.

Edit in sandbox 
        
            
            <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.

Edit in sandbox 
        
            
            <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.

Edit in sandbox 
        
            
            <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.

Edit in sandbox 
        
            
            <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.

We'll never share your email with anyone else.
Edit in sandbox 
        
            
          <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.

Must be 8-20 characters long.
Edit in sandbox 
        
            
          <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.

Example helper
Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
            <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.

Edit in sandbox 
        
            
          <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:

Edit in sandbox 
        
            
          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 mdb.Input(formOutline).init();
          });