Max Length for Input - Stimulus Controller

maxlength_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["counter", "input"];

  connect() {
    this.updateCounter();
  }

  trackLength() {
    this.updateCounter();
  }

  get maxLength() {
    return Number(this.inputTarget.getAttribute("data-maxlength"));
  }

  updateCounter() {
    const count = this.inputTarget.value.length;
    this.counterTarget.textContent = `${count} / max ${this.maxLength}`;

    if (count > this.maxLength) {
      this.counterTarget.classList.add("text-danger");
    } else {
      this.counterTarget.classList.remove("text-danger");
    }
  }
}