how to add a class to the input component in a wrapper in simple_form 2

Question

I am trying to have class=\"text\" in my input fields when using a custom wrapper called :hinted in simple_form 2.0.0.rc

config.wrappers :hinted do          


        

Answer 1

Currently there no way to do this. You can use the defaults options like this if you want.

<%= simple_form_for(@user, :defaults => { :input_html => { :class => "text" } }) do %>
  <%= f.input :name %>
<% end %>

Answer 2

With :input_html works. It is a bit clunky.

= f.input :email, :input_html => { :class => 'foo' }

You can also set all the inputs on all the form elements:

simple_form_for(@user, :defaults => { :input_html => { :class => "foo" } })

But as you'd expect, this applies to everything.

You can create custom form elements:

# app/inputs/foo_input.rb
class FooInput < SimpleForm::Inputs::StringInput
  def input_html_classes
    super.push('foo')
  end
end

// in your view:
= f.input :email, :as => :foo

See: https://github.com/plataformatec/simple_form/wiki/Adding-custom-input-components

You can also create a custom form builder:

def custom_form_for(object, *args, &block)
  options = args.extract_options!
  simple_form_for(object, *(args << options.merge(builder: CustomFormBuilder)), &block)
end

class CustomFormBuilder < SimpleForm::FormBuilder
  def input(attribute_name, options = {}, &block)
    options[:input_html].merge! class: 'foo'
    super
  end
end

Answer 3

I had a similar problem, however it seems that this feature (the input_class one) was merged after the 3.0.0 version.

So I tried to make a monkey patch for supporting at least the config.input_class = 'foo' code

My intention is not to do a great monkey patch (in fact I like this article here for doing that - the monkey patch), well it is only an idea but it works, now I'm working with the SimpleForm v2.1.3 and Bootstrap 4 - alpha version (the last one is not important here but it is just for an information purpose)

here is the code for the monkey patch:

module SimpleForm
  mattr_accessor :input_class
  @@input_class = nil
end
module SimpleForm
  module Inputs
    class Base
      def html_options_for(namespace, css_classes)
        html_options = options[:"#{namespace}_html"]
        html_options = html_options ? html_options.dup : {}
        css_classes << html_options[:class] if html_options.key?(:class)
        css_classes << SimpleForm.input_class if namespace == :input && SimpleForm.input_class.present?
        html_options[:class] = css_classes unless css_classes.empty?
        html_options
      end
    end
  end
end

now you can do something like this:

SimpleForm.setup do |config|
  # ...
  config.input_class = 'foo'
  #...
end

Answer 4

This feature is about to be merged to master right now (Oct. 2012):

https://github.com/plataformatec/simple_form/pull/622

Then you can do something like this to add HTML attributes directly on the input field:

SimpleForm.build :tag => :div, :class => "custom_wrapper" do |b|
  b.wrapper :tag => :div, :class => 'elem' do |component|
    component.use :input, :class => ['input_class_yo', 'other_class_yo']
    component.use :label, :"data-yo" => 'yo'
    component.use :label_input, :class => 'both_yo'
    component.use :custom_component, :class => 'custom_yo'
  end
end

Answer 5

You can setup this in simple_form initializer:

config.input_class = 'foo'

It works for me :)