Materialize CSS Checkbox inside a collapsible

I'm using the MaterializeCSS framework and i'm wanna put checkbox inside the collapsible-body,then i got a problems my checkbox don't show here bellow my code, hope the community help me

<ul class="collapsible">
 <li>
  <div class="collapsible-header"><i class="materialicons">filter_drama</i>First</div>
  <div class="collapsible-body">
   <label>
    <input type="checkbox" />
    <span>Red</span>
   </label>
  </div>
 </li>
 <li>
  <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
  <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
 </li>
 <li>
  <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
  <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
 </li>
</ul>