simple_form custom inline_checkbox markup

Question

I'm trying to change the markup of an label_input.

This line (from simple_form_bootstrap.rb, wrapper inline_checkbox)

  ba.use :label_input, :wrap_with => { :class => 'checkbox inline' }

and the call from my template:

= f.input :my_checkbox, as: :boolean, wrapper: :inline_checkbox, label: false, inline_label: "My label"

I get the following markup:

<div class="control-group boolean optional my_checkbox">
  <div class="controls">
    <div class="checkbox inline">
      <input name="application[my_checkbox]" type="hidden" value="0">
      <label class="checkbox">
        <input class="boolean optional" id="my_checkbox" name="application[my_checkbox]" type="checkbox" value="1">
        My label
      </label>
    </div>
  </div>
</div>

Instead of having the checkbox input a child of the label, I want the checkbox input a sibling of the same div with the class "checkbox inline", like this:

<div class="control-group boolean optional my_checkbox">
  <div class="controls">
    <div class="checkbox inline">
      <input name="application[my_checkbox]" type="hidden" value="0">
      <input class="boolean optional" id="my_checkbox" name="application[my_checkbox]" type="checkbox" value="1">

      <label class="checkbox">
        My label
      </label>
    </div>
  </div>
</div>

Using a custom wrapper, I am able to change the markup slightly, but :label_input always puts the input inside of the label. How can I change this behavior? Ideally, I have a new wrapper that doesn't use label_input, and instead uses a :label and an :input_field, but I've had no success.

Answer 1

Simple form has a couple of ways to render check boxes /radio buttons with labels. They are defined in the initializer file:

File: config/initializers/simple_form.rb

# Define the way to render check boxes / radio buttons with labels.
# Defaults to :nested for bootstrap config.
#   :inline => input + label
#   :nested => label > input
# config.boolean_style = :nested
config.boolean_style = :inline

What you want is to change this to :inline instead of :nested so that Simple Form renders just the inputs without the label wrappers on the input. See SimpleForm::Inputs::BooleanInput#input.

Modify the initializer file with above change and restart your rails server for this change to take effect. Use input as follows:

= f.input :my_checkbox, as: :boolean, wrapper: :inline_checkbox, label: "My label"

Following is another way to achieve something similar that does not require above configuration change. I've added a wrapper div with checkbox inline classes to wrap check box inputs and label:

= f.input :my_checkbox do
  = content_tag :div, class: 'checkbox inline' do
    = f.check_box :my_checkbox
    = f.label :my_checkbox

Answer 2

<%=nested_f.input_field :search_team, id: "#{nested_f.options[:child_index]}"%>
<label class="checked_search" for="<%=nested_f.options[:child_index]%>"><span></span> </label>

it will generate

<input name="user[users_sport_types_attributes][0][search_team]"      type="hidden" value="0">
<label class="checkbox">
  <input checked="checked" class="boolean optional" id="#{nested_f.options[:child_index]" name="user[users_sport_types_attributes][0][search_team]" type="checkbox" value="1">
</label>

 <label class="checked_search" for="c1">
   <span></span>
 </label>

you can set boolean_style: :inline option to get input without wrapper. Don't forget use input_field instead input simple form method.

<%=nested_f.input_field :search_team, boolean_style: :inline, id: "#{nested_f.options[:child_index]}"%>
<label class="checked_search" for="<%=nested_f.options[:child_index]%>"><span></span></label>

it will generate code without wrappers and label

 <input name="user[users_sport_types_attributes][0][search_team]" type="hidden" value="0">
 <input checked="checked" class="boolean optional" id="c1" name="user[users_sport_types_attributes][0][search_team]" type="checkbox" value="1">
 <label class="checked_search" for="c1">
    <span></span>
 </label>

don't forget use <%=nested_f.options[:child_index]%> to get current nested fields count nad correct connect label for checkbox

Answer 3

Try using label_html options. Adding to the input ", label_html: {class: "checkbox"} "