Stimulus.js Tutorial: Implementing Radio Selection In A Form

Let’s say your building a really fancy UI, and you don’t want to use plain old radio buttons in your form. You might have a list of items, and you’d like your customer to select one of them. You also don’t want them to submit the form without selecting an item. Here’s an example of how you can use Stimulus.js to handle the selection, put the value into an input field, and then enable the submit button.

Getting Started

I’m assuming you’ve setup your page to properly pull in Stimulus Controllers. The Handbook has instructions if you’re new and need to get started.

[convertkit form=873863]

Build the HTML

Let’s add the Stimulus annotations to our form. The <form> tag is going to have the controller, and each list option is both a target, and clicking the option is the source of the selectRadioOption() function. There is another input field that I’ve made visible, but disabled. I imagine you would make this hidden in a production form, but I wanted you to be able to see it. The submit button is also a target, so that we can enable it once a selection has been made.

I’ve filled in the form to order a flavor of ice cream, but you can fit this to your needs.

<h1>Order An Ice Cream Cone</h1>
<form data-controller="radio-selector">
  <ul>
    <li data-target="radio-selector.option" 
        data-action="click->radio-selector#selectRadioOption">
      Chocolate
    </li>
    <li data-target="radio-selector.option" 
        data-action="click->radio-selector#selectRadioOption">
      Vanilla
    </li>
    <li data-target="radio-selector.option" 
        data-action="click->radio-selector#selectRadioOption">
      Strawberry
    </li>
  </ul>
  You're order is <input id='option' value="Please Select An Option Above" disabled data-target="radio-selector.input">
  <br />
  <input type="submit" value="Finish Order" disabled data-target="radio-selector.submit">
</form>

Setup the Stimulus Controller

Our controller needs the targets for the selector options, the form input, and the form submit button. We also need the code for our selectRadioOption() function. And that’s all that radio_selector_controller.js will have.

import { Controller } from "stimulus"

export default class extends Controller {

  static targets = ["option", "input", "submit"]
  
  selectRadioOption() {
    this.optionTargets.forEach((el, i) => {
      el.classList.toggle("active", event.target == el )
    })
    this.inputTarget.value = event.target.innerText
    this.submitTarget.disabled = false
  }
}

The selectRadioOption() function will set the selected item to an active class, which only sets background color to blueviolet. The function sets the value of our form input from the selection items text, and then it enables the submit button of the form.

In Closing

This is a small example I extracted from a more complicated form. You could add data attributes to each option for a richer UI, such as price of the cone, or perhaps the flavor_id, that you can pass onto your ordering system.

Feel free to leave a comment or question below.

Want To Learn More?

Try out some more of my Stimulus.js Tutorials.

Blogging On Rails