Cocoon Gem in Ruby on Rails - Programming Tips

Cocoon Gem in Ruby on Rails - Programming Tips

13 Jul 2018

There are a number of gems used in Ruby on Rails Framework. Cocoon gem is one of them; this gem is basically used for Nested forms, multiple models, and multiple attributes in one form.


Nested forms in Rails are the forms that are used for creating; updating, deleting multiple models data using a single form.


For example, we have two models user and address. If we have to save user and address data from a single form here nested forms are used.


Let us consider another scenario, if we have to save one user data having multiple addresses at that time cocoon gem is very useful.


The cocoon gem generates nested form and adds/remove button for adding/removing multiple forms for the nested model (in the above case “addresses”).


Simply clicking on add/remove button we can generate multiple form fields of the nested model (addresses).




This gem requires jQuery. If jQuery is not present in the project then simply add the “jquery_rails” gem to gemfile.rb.




Add the following in Gemfile.rb file:

gem 'cocoon'


Also, add the following in the application.js file:

//= require cocoon


That’s all about the installation process.


Let’s see an Example PROJECT


For creating a Project model, controller, and views using scaffold command just run:

rails g scaffold Project name:string description:string


Then create a Task model which belongs to the project:

rails g model Task description:string done:boolean project:belongs_to


Changes in rb file:

class Project < ApplicationRecord

  has_many :tasks, inverse_of: :project

  accepts_nested_attributes_for :tasks, reject_if: :all_blank, allow_destroy: true



No changes required in rb file:


class Task < ApplicationRecord

  belongs_to :project




Changes in projects_controller.rb file: 


def project_params

  params.require(:project).permit(:name, :description, tasks_attributes: [:id, 

  :description, :done, :_destroy])



Changes in projects/_form.html.erb file:


Cocoon Gem in Ruby on Rails Development



Create a new file named as _task_fields.html.erb in the projects folder in view and add the following code to it:



Cocoon Gem in Ruby on Rails Development



Following are the snapshots of output scenarios:


  1. Creating a new project:


 Creating a new project in Ruby on Rails

  1. Adding one task in project form (click on add task link to render task form):


Nested Forms in Ruby on Rails Development


  1. Adding two tasks in project form:


Nested Forms with Add or Remove Tasks in Ruby on Rails Development


Similarly, we can remove the task form from the project by clicking on the remove task link present on the project form.


In the process of web application development nested forms play important roles that can be achieved by using COCOON GEM so that one can add multiple instances of nested form in a form.



Lisa Haynes


This is really helpful for making multiple forms. Thanks for sharing.


Leave a comment: