Rails. Splitting a radio button collection into columns with Form Helpers or Simple_form

Question

I've the following form that uses Simple_form gem:

<%= simple_form_for @match_prediction do |f| %>
  <%= f.input :outcome, label: false, as: :radio_buttons, collection: [['local', match.local_team], ['Tie', 'Tie'], ['visit', match.visiting_team]], label_method: :second, value_method: :first %>
  <%= f.submit 'Save' %>
<% end %>

Currently it works as expected, meaning: Renders 3 radio buttons, exclusive from each other and each resulting in a unique string being passed to the server.

The problem: I'd like to separate each of the radio buttons across different columns in a Bootstrap grid like below:

<div class="row prediction">
  <div class="col-sm-4">
   <!-- FIRST RADIO BUTTON HERE -->
  </div>
  <div class="col-sm-4">
   <!-- SECOND RADIO BUTTON HERE -->
  </div>
  <div class="col-sm-4">
   <!-- THIRD RADIO BUTTON HERE -->
  </div>
    <%= f.submit 'Save' %>
</div>

Since the whole collection is specified in one line within the form code, I can't simply split lines and insert them in the relevant HTML.

Is there a way to achieve this either via simple_form or vanilla rails form helpers?

I've considered splitting the radios as separate form inputs but this would allow to select more that one option at once. I'd appreciate your help.

What is the generated html output for <%= f.input :outcome, ... %>? — assefamaru

Simon Franzen Simon Franzen · Accepted Answer · 2018-03-11T13:05:14

Coudn't you use a standard rails helper in simple_form form? What about using the radio_button helper directly. Docs

<div class="row prediction">
  <div class="col-sm-4">   
    <%= radio_button 'match_prediction', 'outcome', 'local', checked: @match_prediction.outcome == 'local' %> <%= match.local_team %>
  </div>
  <div class="col-sm-4">
    <%= radio_button 'match_prediction', 'outcome', 'Tie', checked: @match_prediction.outcome == 'Tie' %> <%= 'Tie' %>
  </div>
  <div class="col-sm-4">      
    <%= radio_button 'match_prediction', 'outcome', 'visit', checked: @match_prediction.outcome == 'visit' %> <%= match.visiting_team %>
  </div>
  <%= f.submit 'Save' %>
</div>

And if it is possible to access standard FormHelper in simple_form you can call:

<%= f.radio_button 'outcome', 'xzy' %> <%= 'whatever' %>

Rails. Splitting a radio button collection into columns with Form Helpers or Simple_form

1 Answers