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

Thanks a lot for this :).

I have a doubt. What's the purpose of having two divs, and what is the purpose of the append.use :input, class: "form-control. In the end I still have to add it in the view through class: "form-control", I just removed it from the wrapper and still works... just like that line is being completely ignored.

Any ideas about the wrapper_mappings? They don't seem to work.

Clever!

🍸 🐢

Thanks!

I'm getting the error: Couldn't find wrapper with name vertical_input_group any idea how this is possible?

@stijnwesterhof you need to restart rails, initializer doesn't reload automatically.

@chunlea thanks a lot for the solution, works perfectly (checked on Rails 5)