Input fields

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


          <mdb-form-control>
            <input mdbInput type="text" id="form1" class="form-control" />
            <label mdbLabel class="form-label" for="form1">Example label</label>
          </mdb-form-control>
        

Sizing

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




          <mdb-form-control>
            <input mdbInput type="text" id="formControlLg" class="form-control form-control-lg" />
            <label mdbLabel class="form-label" for="formControlLg">Form control lg</label>
          </mdb-form-control>

          <mdb-form-control>
            <input mdbInput type="text" id="formControlDefault" class="form-control" />
            <label mdbLabel class="form-label" for="formControlDefault">Form control default</label>
          </mdb-form-control>

          <mdb-form-control>
            <input mdbInput type="text" id="formControlSm" class="form-control form-control-sm" />
            <label mdbLabel class="form-label" for="formControlSm">Form control sm</label>
          </mdb-form-control>
        

Disabled

Add the disabled boolean input on an element with mdbInput directive to give it a grayed out appearance and remove pointer events.


          <mdb-form-control>
            <input
              mdbInput
              class="form-control"
              id="formControlDisabled"
              type="text"
              placeholder="Disabled input"
              aria-label="disabled input example"
              [disabled]="true"
            />
            <label mdbLabel class="form-label" for="formControlDisabled">Disabled</label>
          </mdb-form-control>
        

Readonly

Add the readonly boolean input on an element with mdbInput directive to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.


          <mdb-form-control>
            <input
              mdbInput
              class="form-control"
              id="formControlReadonly"
              type="text"
              placeholder="Readonly input here..."
              aria-label="readonly input example"
              [readonly]="true"
            />
            <label mdbLabel class="form-label" for="formControlReadonly">Readonly</label>
          </mdb-form-control>
        

Types

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

Text


            <mdb-form-control>
              <input mdbInput type="text" id="typeText" class="form-control" />
              <label mdbLabel class="form-label" for="typeText">Text input</label>
            </mdb-form-control>
          

Email


            <mdb-form-control>
              <input mdbLabel type="email" id="typeEmail" class="form-control" />
              <label mdbInput class="form-label" for="typeEmail">Email input</label>
            </mdb-form-control>
          

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


            <mdb-form-control>
              <textarea mdbInput class="form-control" id="textAreaExample" rows="4"></textarea>
              <label mdbLabel class="form-label" for="textAreaExample">Message</label>
            </mdb-form-control>
          

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.

          <mdb-form-control>
            <input
              mdbInput
              type="text"
              id="formTextExample1"
              class="form-control"
              aria-describedby="textExample1"
            />
            <label mdbLabel class="form-label" for="formTextExample1">Example label</label>
          </mdb-form-control>
          <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">
            <mdb-form-control class="col-auto">
              <input
                mdbInput
                type="password"
                id="formTextExample2"
                class="form-control"
                aria-describedby="textExample2"
              />
              <label mdbLabel class="form-label" for="formTextExample2">Password</label>
            </mdb-form-control>
            <div class="col-auto">
              <span id="textExample2" class="form-text"> Must be 8-20 characters long. </span>
            </div>
          </div>
        

Dark background

When placing an input on the dark background add .form-white class next to .form-outline to provide proper contrast.


          <mdb-form-control class="form-white">
            <input mdbInput type="text" id="formWhite" class="form-control" />
            <label mdbLabel class="form-label" for="formWhite">Example label</label>
          </mdb-form-control>
        

Input fields - API


Import


            import { MdbFormsModule } from 'mdb-angular-ui-kit/forms';
            …
            @NgModule ({
              ...
              imports: [MdbFormsModule],
              ...
            })
          

Inputs

Name Type Default Description
disabled Boolean false Changes input disabled state
readonly Boolean false Changes input readonly state
value any - Changes input value