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.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.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.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;
    }
  }
}

---

Zurb Foundation 6 for inline

To make the inline input group labels watch: http://foundation.zurb.com/sites/docs/forms.html#inline-labels-and-buttons

  # config/initializers/simple_form.rb
  # you can add all other "use" in the config, this is just the main wrapper needed to make inline label inputs

  config.wrappers :zurb_input, class: "input-group", error_class: :field_with_errors do |b|
    b.use :html5
    b.use :placeholder

    b.use :label, class: "input-group-label"
    b.use :input, class: "input-group-field"
  end

In the view use it like:

= f.input :email, as: :email, label: "Email", wrapper: :zurb_input

Will render this:

<div class="input-group email required user_email">
  <label class="email required input-group-label" for="user_email">
    <abbr title="required">*</abbr> 
    Email
  </label>
  <input class="string email required input-group-field" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email">
</div>