Custom Wrappers

Custom Wrappers

Inline Checkbox + Label inside of vertical form

You used to have to use a custom wrapper to display the checkbox label beside the checkbox in a vertical form. You can now (as of Dec 2012), declare label: false, and inline_label: true to achieve the same effect (thanks to this helpful StackOverflow post).

 <%= f.input :append, as: :boolean, inline_label: true, label: false %>

The section below is helpful for showing how to create a custom wrapper, so has been left as a good description of this.

Here is how to do it as a custom wrapper. Add this to config/initializers/simple_form.rb

config.wrappers :inline_checkbox, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
  b.use :html5
  b.use :placeholder
  b.wrapper :tag => 'div', :class => 'controls' do |ba|
    ba.use :label_input, :wrap_with => { :class => 'checkbox inline' }
    ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
    ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
  end
end

In the view use it like:

= f.input :remember_me, :wrapper => :inline_checkbox

Here is what it looks like:

---

Using Twitter Bootstrap, I've had luck with the following:

config.wrappers :inline_checkbox, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
  b.use :html5
  b.use :placeholder
  b.wrapper :tag => 'div', :class => 'controls' do |ba|
    ba.wrapper :tag => 'label', :class => 'checkbox' do |bb|
      bb.use :input
      bb.use :label_text
    end
    ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
    ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
  end
end

---

Twitter Bootstrap + Inline Checkbox + Label inside of horizontal form

  # config/initializers/simple_form.rb
  config.wrappers :inline_checkbox, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.wrapper :tag => 'div', :class => 'controls' do |ba|
      ba.use :label_input, :wrap_with => { :class => 'checkbox inline' }
      ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
      ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
    end
  end

// style.css.scss
.form-horizontal {
  div.checkbox.inline {
    .control-label {
      text-align: left;
    }
  }
}