Simple Form: How to use the input group of bootstrap

This article guides the simplest way to create an input group of bootstrap using Simple Form

Environment

Rails 6.0.3.4
Ruby 2.7.1
Bootstrap 5
simple_form (5.0.3)

Basic sample

You can refer to input group writing using bootstrap here

preview

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

Add Simple Form using bootstrap to Rails App

Add it to your Gemfile:
```
gem 'simple_form'
```
Run the following command to install it:
```
bundle install
```
Simple Form can be easily integrated to the Bootstrap. To do that you have to use the bootstrap option in the install generator, like this:
```
rails generate simple_form:install --bootstrap
```

Simple form will generate two file to setup Simple Form and Bootstrap in there

config/initializers/simple_form.rb
config/initializers/simple_form_bootstrap.rb

Active custom components rendered using the wrappers API

By default, Input Group component will not active. So we need go to config/initializers/simple_form_bootstrap.rb and delete comment out of wrappers config

config.wrappers :input_group, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
  b.use :html5
  b.use :placeholder
  b.optional :maxlength
  b.optional :minlength
  b.optional :pattern
  b.optional :min_max
  b.optional :readonly
  b.use :label
  b.wrapper :input_group_tag, tag: 'div', class: 'input-group' do |ba|
    ba.optional :prepend
    ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
    ba.optional :append
  end
  b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
  b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
end

According to the simple form bootstrap document, you can already use the input group like below:

simple_form_for @user, wrapper: :input_group do |f|
  f.input :name, prepend: "@"
  f.input :email, prepend: "example-", append: "@gmail.com"
end

Even if you did the right tutorial, here we will still get undefined method append for class SimpleForm::Inputs::StringInput error.

Actually, we need to take one more step to register the Input Group to SimpleForm.

# config/initializers/simple_form_component.rb

module InputGroup
  def prepend(wrapper_options = nil)
    span_tag = content_tag(:span, options[:prepend], class: "input-group-text")
    template.content_tag(:div, span_tag, class: "input-group-prepend")
  end

  def append(wrapper_options = nil)
    span_tag = content_tag(:span, options[:append], class: "input-group-text")
    template.content_tag(:div, span_tag, class: "input-group-append")
  end
end

# Register the component in Simple Form.
SimpleForm.include_component(InputGroup)

Source

Its weird that this doesn't included in the lib and have to add manually. Now, to use it in your form:

simple_form_for @user do |f|
  f.input :name, wrapper: :input_group, prepend: "@"
  f.input :email, wrapper: :input_group, prepend: "example-", append: "@gmail.com"
end