Stimulus Playground

Below are some examples of reusable Stimulus controllers I’ve harvested out of real production apps that I’ve built over the past year or so.

Source Code


Toggle

Toggle is a simple, reusable controller to handle showing/hiding content, with optional support for toggling an up/down icon as well as show/hide keyword depending on the state.

Demo

Demo Source

<div data-controller="toggle">
  <div class="flex mb-2">
    <a href="javascript:void(0)"
      class="flex items-center text-xl mr-2"
      data-action="toggle#toggle">
      <div class="mr-2" data-target="toggle.keyword">Show</div>
      <div class="mr-2" data-target="toggle.iconDown">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="fill-current h-6 w-6"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg>
      </div>
      <div class="mr-2 hidden" data-target="toggle.iconUp">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="fill-current h-6 w-6"><path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg>
      </div>
    </a>
  </div>

  <div class="hidden bg-green-800 rounded p-4"
       data-target="toggle.content">
    Hey!  This is cool.
  </div>
</div>

Checkboxes

Checkboxes is a controller to power a checkbox list user interface, with support for checking/unchecking all boxes at once, customizing the styles of selected items and storing the selected values in a configured hidden field.

Demo

This will go away once any of them are checked.
These are the ids of the checked items:

Demo Source

<div class="mb-8"
     data-controller="checkboxes"
     data-checkboxes-selected-styles="bg-green-800 rounded">

  <div class="flex items-center border-b mb-4 pb-2">
    <input type="checkbox"
           id="frameworks"
           class="mr-4"
           style="transform: scale(1.5)"
           value="all"
           data-target="checkboxes.selectAll"
           data-action="checkboxes#toggleSelectAll">
    <label for="frameworks" class="text-lg flex items-center">
      <div class="mr-2">Frameworks</div>
      <span class="bg-green-800 px-1 hidden rounded" data-target="checkboxes.count"></span>
    </label>
  </div>

  <div class="checkbox-container flex items-center mb-4">
    <input type="checkbox"
           id="rails"
           class="mr-4"
           style="transform: scale(1.5)"
           value="rails"
           data-id="1"
           data-target="checkboxes.checkbox"
           data-action="checkboxes#toggleSelectOne">
    <label for="rails">Ruby on Rails</label>
  </div>

  <div class="checkbox-container flex items-center mb-4">
    <input type="checkbox"
           id="laravel"
           class="mr-4"
           style="transform: scale(1.5)"
           value="laravel"
           data-id="2"
           data-target="checkboxes.checkbox"
           data-action="checkboxes#toggleSelectOne">
    <label for="laravel">Laravel</label>
  </div>

  <div class="checkbox-container flex items-center mb-4">
    <input type="checkbox"
           id="react"
           class="mr-4"
           style="transform: scale(1.5)"
           value="react"
           data-id="3"
           data-target="checkboxes.checkbox"
           data-action="checkboxes#toggleSelectOne">
    <label for="react">React</label>
  </div>

  <div class="bg-green-800 hidden p-2 rounded"
       data-target="checkboxes.showWhenAnyChecked">
    This was shown because at least one checkbox was checked.
  </div>

  <div class="bg-orange-800 p-2 rounded"
       data-target="checkboxes.hideWhenAnyChecked">
    This will go away once any of them are checked.
  </div>

  <div class="bg-blue-800 p-2 rounded mt-4 flex items-center justify-between">
    <div>These are the ids of the checked items:</div>
    <input type="text"
           class="text-blue-800 text-center"
           data-target="checkboxes.selectedValues">
  </div>
</div>

Choices

Choices is a Stimulus wrapper around the excellent choices.js library for select/input boxes. It supports optional remote fetching of data for both loading the data as well as searching.

Demo (loading GitHub repositories)

Demo Source

<div data-controller="choices"
     data-choices-remote-load="true"
     data-choices-remote-load-url="https://api.github.com/repositories?since=364"
     data-choices-remote-load-label="name">
  <select data-target="choices.list" class="text-black"></select>
</div>