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

The input type="text" defines a single-line text field.

<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

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

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

Password

The input field type="password" defines a password field, thus hiding characters as confidential information.

<mdb-form-control>
  <input mdbInput type="password" id="typePassword" class="form-control" />
  <label mdbLabel class="form-label" for="typePassword">Password input</label>
</mdb-form-control>

Number

The input type="number" defines field for entering a number. 

<mdb-form-control>
  <input mdbInput type="number" id="typeNumber" class="form-control" />
  <label mdbLabel class="form-label" for="typeNumber">Number input</label>
</mdb-form-control>

Phone number

The input type="tel" defines a field for entering a telephone number.

<mdb-form-control>
  <input mdbInput type="tel" id="typePhone" class="form-control" />
  <label mdbLabel class="form-label" for="typePhone">Phone number input</label>
</mdb-form-control>

URL

The input type="url" defines a field for entering a URL.

<mdb-form-control>
  <input mdbInput type="url" id="typeURL" class="form-control" />
  <label mdbLabel class="form-label" for="typeURL">URL input</label>
</mdb-form-control>

Textarea

The textarea tag defines a multi-line text input control.

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

Character counter

With the help of form-helper, form-counter classes and input's maxlength attribute you can easily create a character counter.

0 / 20
<mdb-form-control>
  <input
    mdbInput
    [formControl]="input"
    type="text"
    id="formCharacterCounter"
    class="form-control"
    aria-describedby="characterCounter"
    [maxlength]="maxLength"
  />
  <label mdbLabel class="form-label" for="formCharacterCounter">Example label</label>
  <div class="form-helper">
    <div class="form-counter">{{ characterCount }} / {{ maxLength }}</div>
  </div>
</mdb-form-control>
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  input = new FormControl();
  characterCount = 0;
  maxLength = 20;

  constructor() {}

  ngOnInit(): void {
    this.input.valueChanges.subscribe((value) => {
      this.characterCount = value.length;
    });
  }
}

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';
import { ReactiveFormsModule } from '@angular/forms';

…
@NgModule ({
  ...
  imports: [MdbFormsModule, ReactiveFormsModule],
  ...
})

Inputs

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