Search code examples
ruby-on-railstwitter-bootstrapsasssimple-formsimple-form-for

Multiple radio buttons with simple_form (Star Rating)


I'm using simple_form and trying to get a custom wrapper working. No luck so far.

I'm looking to create a simple star rating which has 5 radio buttons for every value. The desired output:

<fieldset class="rating-new">
  <input type="radio" id="star5" name="rating" value="5" />
  <label class = "full" for="star5" title="Awesome - 5 stars"></label>

  <input type="radio" id="star4" name="rating" value="4" />
  <label class = "full" for="star4" title="Pretty good - 4 stars"></label>

  <input type="radio" id="star3" name="rating" value="3" />
  <label class = "full" for="star3" title="Meh - 3 stars"></label>

  <input type="radio" id="star2" name="rating" value="2" />
  <label class = "full" for="star2" title="Kinda bad - 2 stars"></label>

  <input type="radio" id="star1" name="rating" value="1" />
  <label class = "full" for="star1" title="Sucks big time - 1 star"></label>
</fieldset>

I'm using simple_form-bootstrap and understand that I will need to create a custom wrapper to do this but I chased it a lot and can't seem to figure it out.

Thoughts on how I can achieve this?


Solution

  • Thanks @HarlemSquirrel for reminding me of collection_radio_buttons. I wanted to create a custom wrapper for it but I settled with tweaking the labels and style to get where I want to:

    Here's how I got it working:

    <%= f.collection_radio_buttons :rating, [[5], [4], [3], [2], [1]], :first, :last, item_wrapper_tag: false, boolean_style: :inline do |b| %>
      <%= b.radio_button + b.label {''} %>
    <% end %>