Simple_Form's Collection_Radio_Button and Custom Label Class

simple_form's collection_radio_button and custom label class

This can be achieved by using a block:

form_for @user do |f|
  f.collection_radio_buttons :rating, [[1, 'Bad'] ,[2, 'Ok'], [3, 'Great']],
                             :first, :last, { item_wrapper_tag: false } do |b|
    b.radio_button + b.label(:class => "collection_radio_buttons icon-star")
  end
end

This doc can showcase some other example: http://rubydoc.info/github/plataformatec/simple_form/SimpleForm/FormBuilder:collection_radio_buttons

Properties for collection_radio_buttons in simple_forms to wrap all in div

  <%= f.collection_radio_buttons :question,
  [[true, 'Yes'] ,[false, 'No']], :first, :last,
  item_wrapper_tag: false, boolean_style: :inline, 
  collection_wrapper_tag: "div",
  collection_wrapper_class: "toggle-group" %>

Add collection_wrapper_tag: "div", to wrap the collection in a tag. Add collection_wrapper_class: "toggle-group" to set the class to the div tag. Docs: here and

How to add a custom class to simple_form f.association as: :radio_buttons

use item_wrapper_class

= simple_form_for @post do |f|
  = f.input :name
  = f.association :comments, :as => :radio_buttons, :item_wrapper_class => 'test_class'

simple_form collection wrapper (radios buttons) : double encapsulation of items

Summary:

I had done something similar to this before by creating a custom input that inherits from SimpleForm::Inputs::CollectionRadioButtonsInput and overloading just a few methods. For more on custom input components, see https://github.com/plataformatec/simple_form/wiki/Adding-custom-input-components.

In any case, the code below produces your desired html markup almost exactly using simple_form v2.1.0 and rails v3.2.15.

Code:

# File: app/inputs/semantic_ui_radio_buttons_input.rb

class SemanticUiRadioButtonsInput < SimpleForm::Inputs::CollectionRadioButtonsInput

  # Creates a radio button set for use with Semantic UI

  def input
    label_method, value_method = detect_collection_methods
    iopts = { 
      :checked => 1,
      :item_wrapper_tag => 'div',
      :item_wrapper_class => 'field',
      :collection_wrapper_tag => 'div',
      :collection_wrapper_class => 'grouped inline fields'
     }
    return @builder.send(
      "collection_radio_buttons",
      attribute_name,
      collection,
      value_method,
      label_method,
      iopts,
      input_html_options,
      &collection_block_for_nested_boolean_style
    )
  end # method

  protected

  def build_nested_boolean_style_item_tag(collection_builder)
    tag = String.new
    tag << '<div class="ui radio checkbox">'.html_safe
    tag << collection_builder.radio_button + collection_builder.label
    tag << '</div>'.html_safe
    return tag.html_safe
  end # method

end # class

Then, in your form, just do:

-# File: app/views/<resource>/_form.html.haml

-# Define the collection
- child_care_coll = %w( Infant Toddler Preschool Kindergarten ).map!.with_index(1).to_a

-# Render the radio inputs
= f.input :child_care_type,
  :collection    => child_care_coll,
  :label_method  => :first,
  :value_method  => :last,
  :as            => :semantic_ui_radio_buttons

Results:

<div class="input semantic_ui_radio_buttons optional childcare_child_care_type">

  <label class="semantic_ui_radio_buttons optional control-label">
    Child care type
  </label>

  <div class="grouped inline fields">

    <div class="field">
      <div class="ui radio checkbox">
        <input checked="checked" class="semantic_ui_radio_buttons optional" id="childcare_child_care_type_1" name="childcare[child_care_type]" type="radio" value="1">
        <label for="childcare_child_care_type_1">Infant</label>
      </div>
    </div>

    ...

    <div class="field">
      <div class="ui radio checkbox">
        <input class="semantic_ui_radio_buttons optional" id="childcare_child_care_type_4" name="childcare[child_care_type]" type="radio" value="4">
        <label for="childcare_child_care_type_4">Kindergarten</label>
      </div>
    </div>

  </div>

</div>

---

Related Topics