How to use Boostrap 3 input-group in Simple Form

input-group-in-simple-form.md

Finally, Simple Form support Boostrap 3. 👏

But I found it still dosen't support some components in Bootstrap 3. Or may be in the future. But I can't wait, so I find a solution to support them. It was inspired by heartcombo/simple_form#531 (comment) .

This is a final solution and I used in my project.

simple_form_bootstrap.rb

# File here config/initializers/simple_form_bootstrap.rb
SimpleForm.setup do |config|
  config.wrappers :vertical_input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: 'control-label'

    b.wrapper tag: 'div' do |ba|
      ba.wrapper tag: 'div', class: 'input-group col-sm-12' do |append|
        append.use :input, class: 'form-control'
      end
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

  config.wrappers :horizontal_input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: 'col-sm-3 control-label'

    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
      ba.wrapper tag: 'div', class: 'input-group col-sm-12' do |append|
        append.use :input, class: 'form-control'
      end
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end
end

view.html.erb

<div class="page-header clearfix">
  <div class="pull-left">
    <h1>Vertical Form<small></small></h1>
  </div>
  <div class="pull-right">
    <div class="btn-group">
      <%= link_to 'Back', sales_groups_path, class: "btn btn-default" %>
      <%= link_to 'Show', @sales_group, class: "btn btn-default" %>
    </div>
  </div>
</div>
<!-- <%= render 'form' %> -->

<%= simple_form_for(@sales_group, wrapper: :vertical_form,
        wrapper_mappings: {
          check_boxes: :horizontal_radio_and_checkboxes,
          radio_buttons: :horizontal_radio_and_checkboxes,
          file: :horizontal_file_input,
          boolean: :horizontal_boolean
        }) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :name, wrapper: :vertical_input_group, hint: "Google" do %>
      <span class="input-group-addon">Prepend stuff</span>
      <%= f.input_field :name, class: "form-control" %>
      <span class="input-group-addon">Append stuff</span>
    <% end %>
    <%= f.input :state, wrapper: :vertical_input_group, hint: "Google" do %>
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <%= f.input_field :state, class: "form-control" %>
      <span class="input-group-addon">
        <input type="radio">
      </span>
    <% end %>
    <%= f.input :state, wrapper: :vertical_input_group, hint: "Google" do %>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <%= f.input_field :state, class: "form-control" %>
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    <% end %>
    <hr>
  </div>
  
  <div class="form-actions col-sm-offset-3">
    <%= f.button :submit %>
  </div>
<% end %>

<div class="page-header clearfix">
  <div class="pull-left">
    <h1>Horizontal Form<small></small></h1>
  </div>
  <div class="pull-right">
    <div class="btn-group">
      <%= link_to 'Back', sales_groups_path, class: "btn btn-default" %>
      <%= link_to 'Show', @sales_group, class: "btn btn-default" %>
    </div>
  </div>
</div>

<%= simple_form_for(@sales_group, html: { class: 'form-horizontal' },
        wrapper: :horizontal_form,
        wrapper_mappings: {
          check_boxes: :horizontal_radio_and_checkboxes,
          radio_buttons: :horizontal_radio_and_checkboxes,
          file: :horizontal_file_input,
          boolean: :horizontal_boolean
        }) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :name, wrapper: :horizontal_input_group, hint: "Google" do %>
      <span class="input-group-addon">Prepend stuff</span>
      <%= f.input_field :name, class: "form-control" %>
      <span class="input-group-addon">Append stuff</span>
    <% end %>
    <%= f.input :state, wrapper: :horizontal_input_group, hint: "Google" do %>
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <%= f.input_field :state, class: "form-control" %>
      <span class="input-group-addon">
        <input type="radio">
      </span>
    <% end %>
    <%= f.input :state, wrapper: :horizontal_input_group, hint: "Google" do %>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <%= f.input_field :state, class: "form-control" %>
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    <% end %>
    <hr>
  </div>
  
  <div class="form-actions col-sm-offset-3">
    <%= f.button :submit %>
  </div>
<% end %>