The Mini John The Mini John - 4 years ago 89
Sass (Sass) Question

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?

Answer Source

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 %>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download