Skip to main content

How to display checkbox and string fields like this image in a form?

Rails • Asked by Daniel Weaver

I have a spectrum boolean column and a spectrum_color string column and I'd like to display the options to user as shown in this image. I'm using Tailwind CSS and the Jumpstart Pro Rails template so the visual side is easy, just not sure what form helpers to use to get the values from 3 radio buttons to fill one boolean field and a string field.

EDIT: can't get an image to display in this post. Here's a link: https://wmd.d.pr/AMZFsu


You can either:

  1. Add some code to the model to transform the selected value here to what you want in the attributes before_validation
  2. Add Javascript to change hidden fields based upon the selection

I'd probably go with Javascript personally in this case as I think it'd be a little simpler.


Right, Javascript does sound like the better route. Would you hijack the form submit and set the values there? Or would you respond to changes on the radio button inputs as they happen then let the form submit normally?


I would use a Stimulus controller to listen for "change" event on the radios and then update the hidden fields accordingly.


Excellent, cheers. Good time for me to dive into Simulus then! 😀


Just in case anyone finds this helpful, here's how I solved this with Stimulus. If you see any improvements let me know!

# _form.html.erb
...
<div class="form-group" data-controller="filters">
    <%= form.label "spectrum" %>
    <%= radio_button_tag :spectrum, "none", :checked, 
        data: { "action": "click->filters#update" } %>
    <%= label_tag :spectrum_none, "None" %>
    <%= radio_button_tag :spectrum, "white", false, 
        data: { "action": "click->filters#update" } %>
    <%= label_tag :spectrum_white, "White" %>
    <%= radio_button_tag :spectrum, "black", false, 
        data: { "action": "click->filters#update" } %>
    <%= label_tag :spectrum_black, "Black" %>

    <%= form.hidden_field :spectrum, 
        data: { "target": "filters.spectrum" } %>
    <%= form.hidden_field :spectrum_color, 
        data: { "target": "filters.spectrum_color" } %>
  </div>
...
# app/javascripts/controllers/filters_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  update(event) {
    const value = event.target.value
    const spectrum = value == "none" ? false : true
    const spectrum_color = value == "none" ? "" : value

    this.targets.find("spectrum").value = spectrum
    this.targets.find("spectrum_color").value = spectrum_color
  }
}

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.