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="form1" class="form-control" />
            <label class="form-label" for="form1">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" 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. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. 


          <div class="form-outline">
            <input
              class="form-control"
              id="formControlReadonly"
              type="text"
              placeholder="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


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

Email


            <div class="form-outline">
              <input type="email" id="typeEmail" class="form-control" />
              <label class="form-label" for="typeEmail">Email input</label>
            </div>

Password


            <div class="form-outline">
              <input type="password" id="typePassword" class="form-control" />
              <label class="form-label" for="typePassword">Password input</label>
            </div>

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


            <div class="form-outline">
              <input type="tel" id="typePhone" class="form-control" />
              <label class="form-label" for="typePhone">Phone number input</label>
            </div>

URL


            <div class="form-outline">
              <input type="url" id="typeURL" class="form-control" />
              <label class="form-label" for="typeURL">URL input</label>
            </div>

Textarea


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

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

          <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

          <div class="form-outline">
            <input type="text" id="form1" class="form-control" />
            <label class="form-label" for="form1">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="form1"
              class="form-control"
              data-mdb-showcounter="true"
              maxlength="20"
            />
            <label class="form-label" for="form1">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();
          });

If you want to support our friends from Tailwind Elements you can also check out the Tailwind inputs documentation.