How to use Bootstrap 3 input group in Simple Form

Simple Form now supports Bootstrap 3. 👏, but still doesn't support some components in Bootstrap 3. This wiki tells you how to use Bootstrap 3 input-group in Simple Form. It was inspired by https://github.com/plataformatec/simple_form/pull/531#issuecomment-5629150 .

Please go to https://gist.github.com/chunlea/11125126/ for more information.

# 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

<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_input_group,
        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_input_group,
        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 %>