Text Fields

Text fields allow users to enter text into a UI.

They come in two types:

Filled text fields
Outlined text fields

We have used Bootstrap’s .form-floating to create the Text fields.

A placeholder is required on each <input> as a floating label uses the :placeholder-shown pseudo-element to determine its position.

Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).

This component requires Javascript for initialization. Click to view Javascript.

Filled

Firstname

Disabled

CODE

html

<div class="form-floating">
  <input type="text" class="form-control" id="firstname"
         placeholder="firstname" autocomplete="off">
  <label for="firstname">Firstname</label>
</div>

html

<div class="form-floating">
  <input type="text" class="form-control" id="disabled"
         placeholder="disabled" autocomplete="off" disabled>
  <label for="disabled">Disabled</label>
</div>

Outlined

Firstname

Disabled

CODE

html

<div class="form-floating form-floating-outlined">
  <input type="text" class="form-control" id="firstname-outline"
         placeholder="firstname" autocomplete="off">
  <label for="firstname-outline">Firstname</label>
</div>

html

<div class="form-floating form-floating-outlined">
  <input type="text" class="form-control" id="disabled-outlined"
         placeholder="disabled-outlined" autocomplete="off" disabled>
  <label for="disabled-outlined">Disabled</label>
</div>

Color options

Make use of --bs-form-field-border-color & --bs-form-field-active-border-color css variables to personalize it according to your brand’s style.

Classes .base-[color] & .primary-[color] are depricated in v3.1.1

Lastname

CODE

html

<div class="form-floating" style="--bs-form-field-border-color: var(--bs-primary-hover); --bs-form-field-active-border-color: var(--bs-tertiary-hover);">
  <input type="text" class="form-control" id="lastname"
         placeholder="lastname" autocomplete="off">
  <label for="lastname">Lastname</label>
</div>

html

<div class="form-floating form-floating-outlined" style="--bs-form-field-border-color: var(--bs-primary-hover); --bs-form-field-active-border-color: var(--bs-tertiary-hover);">
  <input type="text" class="form-control" id="lastname-outline"
         placeholder="lastname" autocomplete="off">
  <label for="lastname-outline">Lastname</label>
</div>

With Icon

Password

CODE

html

<div class="form-floating-with-icon">
  <div class="form-floating">
    <input type="email" class="form-control" id="email"
           placeholder="Email" autocomplete="off">
    <label for="email">Email</label>
  </div>
  <span class="prepend">
    <i class="bi bi-person-circle"></i>
  </span>
</div>

html

<div class="form-floating-with-icon">
  <div class="form-floating form-floating-outlined">
    <input type="email" class="form-control" id="email-outline"
           placeholder="Email" autocomplete="off">
    <label for="email-outline">Email</label>
  </div>
  <span class="prepend">
    <i class="bi bi-person-circle"></i>
  </span>
</div>

html

<div class="form-floating-with-icon">
  <div class="form-floating">
    <input type="password" class="form-control" id="password"
           placeholder="Password" autocomplete="off">
    <label for="password">Password</label>
  </div>
  <span class="append">
    <i class="bi bi-keyboard-fill"></i>
  </span>
</div>

html

<div class="form-floating-with-icon">
  <div class="form-floating form-floating-outlined">
    <input type="password" class="form-control" id="password-outline"
           placeholder="Password" autocomplete="off">
    <label for="password-outline">Password</label>
  </div>
  <span class="append">
    <i class="bi bi-keyboard-fill"></i>
  </span>
</div>

With Spinner

Password

CODE

html

<div class="form-floating-with-icon">
  <div class="form-floating">
    <input type="email" class="form-control" id="email-spinner"
           placeholder="Email" autocomplete="off">
    <label for="email-spinner">Email</label>
  </div>
  <div class="prepend">
    <div class="spinner-material spinner-rainbow">
      <svg viewBox="25 25 50 50">
        <circle cx="50" cy="50" r="20" fill="none" />
      </svg>
    </div>
  </div>
</div>

html

<div class="form-floating-with-icon">
  <div class="form-floating form-floating-outlined">
    <input type="email" class="form-control" id="email-outline-spinner"
           placeholder="Email" autocomplete="off">
    <label for="email-outline-spinner">Email</label>
  </div>
  <div class="prepend">
    <div class="spinner-material text-primary">
      <svg viewBox="25 25 50 50">
        <circle cx="50" cy="50" r="20" fill="none" />
      </svg>
    </div>
  </div>
</div>

html

<div class="form-floating-with-icon">
  <div class="form-floating">
    <input type="password" class="form-control" id="password-spinner"
           placeholder="Password" autocomplete="off">
    <label for="password-spinner">Password</label>
  </div>
  <div class="append">
    <div class="spinner-border text-tertiary"></div>
  </div>
</div>

html

<div class="form-floating-with-icon">
  <div class="form-floating form-floating-outlined">
    <input type="password" class="form-control" id="password-outline-spinner"
           placeholder="Password" autocomplete="off">
    <label for="password-outline-spinner">Password</label>
  </div>
  <div class="append">
    <div class="spinner-grow text-success"></div>
  </div>
</div>

Text Area

To set a custom height on your <textarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).

Address

CODE

html

<div class="form-floating">
  <textarea class="form-control" placeholder="address"
            id="address" style="height: 100px"></textarea>
  <label for="address">Address</label>
</div>

html

<div class="form-floating form-floating-outlined">
  <textarea class="form-control" id="address-outline"
            placeholder="address" style="height: 100px"></textarea>
  <label for="address-outline">Address</label>
</div>

Readonly Plain text

If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

CODE

html

<div class="form-floating">
  <input type="email" class="form-control-plaintext" id="email-read-only-outline"
         placeholder="email-read-only-outline" value="someone@example.com" readonly autocomplete="off">
  <label for="email-read-only-outline">Email</label>
</div>

html

<div class="form-floating form-floating-outlined">
  <input type="email" class="form-control-plaintext" id="email-read-only-outline-outline"
         placeholder="email-read-only-outline-outline" value="someone@example.com" readonly autocomplete="off">
  <label for="email-read-only-outline-outline">Email</label>
</div>

Javascript

// Initialize Text fields
var textFieldList = [].slice.call(document.querySelectorAll('.form-control'))
var textFields = textFieldList.map(function (textField) {
  return new materialstyle.TextField(textField)
})

Redraw

If a Text field is not visible at the time of initialization OR if it is within a container that is not visible by default, for example, Modal, Collapse, Offcanvas, you need to call the redraw() function on the instance when it becomes visible.

var myModal = document.getElementById('myModal')
myModal.addEventListener('shown.bs.modal', function (event) {
  // Redraw Text Field
  var textFields = this.querySelectorAll('.form-control');
  for (const [, value] of Object.entries(textFields)) {
    var textFieldInstance = materialstyle.TextField.getOrCreateInstance(value)
    textFieldInstance.redraw();
  }
});

With jQuery

// Initialize Text fields
$('.form-control').textfield();

// Redraw Text fields
$('.form-control').textfield('redraw');

Theme Builder

Personalize Material Style to reflect your product's brand identity.

CONTENTS