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

The wrapper method yields an instance of SimpleForm::Wrappers::Builder. The builder provides three methods: use, optional and wrapper.

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>

---

Tachyons CSS Wrapper

To utilize Tachyons forms, follow tachyons simple form example or utilize config below:

  # config/initializers/tachyons_simple_form.rb

SimpleForm.setup do |config|
  help_block = 'br0 ba pv1 ph2 mb2 white b--dark-red bg-light-pink'
  config.error_notification_class = help_block
  config.button_class = 'b mv3 ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib'
  config.boolean_label_class = 'pa0 ma0 lh-copy f6 pointer'
  config.default_form_class = 'measure center'

  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'db fw6 lh-copy f6'

    b.use :input, class: 'pa2 input-reset ba bg-transparent w-100 measure'
    b.use :error, wrap_with: { tag: 'div', class: help_block }
    b.use :hint,  wrap_with: { tag: 'div', class: help_block }
  end

  config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :readonly
    b.use :label, class: 'db fw6 lh-copy f6'

    b.use :input
    b.use :error, wrap_with: { tag: 'div', class: help_block }
    b.use :hint,  wrap_with: { tag: 'div', class: help_block }
  end

  config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.optional :readonly

    b.wrapper tag: 'div', class: 'pa0 ma0 lh-copy f6 pointer' do |ba|
      ba.use :label_input
    end

    b.use :error, wrap_with: { tag: 'div', class: help_block }
    b.use :hint,  wrap_with: { tag: 'p', class: help_block }
  end

  config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: '', :error_class => 'error' do |b|
    b.use :html5
    b.wrapper :tag => 'div', :class => '' do |ba|
      ba.wrapper :tag => 'label', :class => '' do |bb|
        bb.use :input
        bb.use :label_text, class: 'pa0 ma0 lh-copy f6 pointer'
      end
      ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
      ba.use :hint,  :wrap_with => { :tag => 'div', :class => help_block }
    end
  end

  config.default_wrapper = :vertical_form
  config.wrapper_mappings = {
    check_boxes: :vertical_radio_and_checkboxes,
    radio_buttons: :vertical_radio_and_checkboxes,
    file: :vertical_file_input,
    boolean: :vertical_boolean,
  }
end

In the view use it like normal:

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>