Materialize css checkbox not working in rails app

Question

I'm trying to add checkboxes to a form for users to select the workshops that they want but I cannot make the checkboxes appear. I'm using Materialize Css gem with rails.

My form is the next:

<div class="row">
  <% workshops = Workshop.all.order("date") %>
  <% workshops.each do |workshop| %>
    <div class=" col m4 s6">
      <%= f.label "#{workshop.name} \n\r #{workshop.date}", for:"workshop_id", id:"workshop_id" %>
      <%= f.check_box :workshop_id, id:"workshop_id" %>
    </div>
  <% end %>  
  <div class="actions col m6 s12">
    <br>
    <br>
    <br>
    <%= f.submit "Save", class:"btn green"%> 
  </div>
</div>

I have tried with and without the id and for attributes inside the input and the label, but nothing seems to work. Am I missing something?

EDIT 1

The css that shows from Materialize css is the following:

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
    visibility: hidden;
}

Answer 1

The solution, as simple as it is... Was to change the order of the <input> and the <label>

So instead of:

<%= f.label "#{workshop.name} \n\r #{workshop.date}", for:"workshop_id", id:"workshop_id" %>`
<%= f.check_box :workshop_id, id:"workshop_id" %>`

The righ way is:

<%= f.check_box :workshop_id, id:"workshop_id" %>
<%= f.label "#{workshop.name} \n\r #{workshop.date}", for:"workshop_id", id:"workshop_id" %>

Solved.

Answer 2

In my case, I realized I was using checkbox inside div with class "input-field" which was breaking it.

Do NOT put checkbox input field inside <div class="input-field col s12 m3"></div>