<script>
  (() => {
    const application = Stimulus.Application.start()

    application.register("hello", class extends Stimulus.Controller {
      static targets = [ "name", "output" ]

      greet() {
        this.outputTarget.textContent =
          `Hello, ${this.nameTarget.value}!`
      }
    })
  })()
</script>

<div data-controller="hello">
  <div class="input-group mb-3 w-25">
    <input type="text" class="form-control" value="Frank" data-target="hello.name">
    <div class="input-group-append">
      <button class="btn btn-primary border-primary" type="button" data-action="click->hello#greet">Greet</button>
    </div>
  </div>
  <span data-target="hello.output">
  </span>
</div>