Stimulus controller for dynamic form interactions

Jordan Lee Jan 2026

2 tabs

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input", "counter"]
  static values = {
    max: { type: Number, default: 280 }
  }

  connect() {
    this.updateCounter()
  }

  updateCounter() {
    const length = this.inputTarget.value.length
    const remaining = this.maxValue - length

    this.counterTarget.textContent = `${remaining} characters remaining`

    // Add warning class when close to limit
    this.counterTarget.classList.toggle('text-warning', remaining < 50 && remaining > 0)
    this.counterTarget.classList.toggle('text-danger', remaining <= 0)
  }
}

<%= form_with model: @post, data: { controller: "character-counter", character_counter_max_value: 280 } do |f| %>
  <div class="form-group">
    <%= f.label :title %>
    <%= f.text_area :title,
        rows: 3,
        data: {
          character_counter_target: "input",
          action: "input->character-counter#updateCounter"
        },
        class: "form-control" %>
    <div data-character-counter-target="counter" class="text-sm text-gray-600 mt-1"></div>
  </div>

  <%= f.submit class: "btn btn-primary" %>
<% end %>

2 files · javascript, erb Explain with highlit

Stimulus brings just enough JavaScript to make static Rails views interactive while staying close to the HTML. Controllers connect to DOM elements via data-controller, and actions bind to events with data-action. I use Stimulus for client-side validations, dynamic field visibility, and character counters—things that don't warrant a full page reload but need interactivity. Targets provide typed references to important elements, and values allow passing data from the server. The convention-based approach means I rarely write initialization boilerplate. Stimulus works seamlessly with Turbo, automatically connecting and disconnecting controllers as frames update. For complex state management I still reach for React, but Stimulus handles 80% of UI interactions beautifully.