CODEWITHSUNDEEP
htmlruby-on-railsrubysimple-form
DanRio
DanRio

Reputation: 473

Change radio buttons to actual buttons - Ruby on Rails Simple Form Gem

I've made multiple attempts at doing this but just can't get my head round how to do it with the automatic wrappers that the Simple Form gem makes.

Using Ruby on Rails (plus Simple Form Gem) I'm trying to make the standard output of radio buttons that look like this:

Standard Radio Buttons

Ruby: 

 <%= n.input :domiciled, as: :radio_buttons, label: "Do you confirm your business is domicled in the United Kingdom?", checked: true %>

HTML output: 

 <div class="form-group radio_buttons optional user_nurse_domiciled">
     <label class="control-label radio_buttons optional">Do you confirm your business is domicled in the United Kingdom?
     </label>
          <input type="hidden" name="user[nurse_attributes][domiciled]" value="">
               <span class="radio">
                  <label for="user_nurse_attributes_domiciled_true">
                     <input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][domiciled]" id="user_nurse_attributes_domiciled_true">Yes
                  </label>
               </span>
               <span class="radio">
                    <label for="user_nurse_attributes_domiciled_false">
                        <input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][domiciled]" id="user_nurse_attributes_domiciled_false">No
                     </label>
                 </span>
   </div>

Look like something like this and still of course hold the true / false value:

Raido buttons as buttons

I've tried various CSS solutions I've found but nothing that I can get to work with Simple Form. Any help much appreciated thanks.

EDIT:

To clarify as per comment question, I'm also using Bootstrap.

Upvotes: 3

Views: 2483

Answers (1)

Shrolox
Shrolox

Reputation: 663

You can hide the real radio button, and set your custom button to be its label. Then the custom button can be styled relatively to wether the radio button is checked or not.

Here is an example generating the fields using another function of Rails Simple Form gem:

f.collection_radio_buttons : domiciled, [[true, 'Yes'] ,[false, 'No']], :first, :last


input[type="radio"] {
  display:none;
}

label {
  border: 1px solid #DDD;
  border-radius:5px;
  padding:10px;
  margin-top:10px;
  display:block;
  position:relative;
}

label:hover {
  cursor:pointer;
  background-color:#EEE;
}

input[type="radio"]:checked + label {
  background-color:#DDD;
}
<input id="user_options_true" name="user[options]" type="radio" value="true" />
<label class="collection_radio_buttons" for="user_options_true">Yes</label>
<input id="user_options_false" name="user[options]" type="radio" value="false" />
<label class="collection_radio_buttons" for="user_options_false">No</label>

Upvotes: 5

Related Questions