How to create a list with actions using materialize-css?

Question

I'm trying to create a list with checkboxes for collecting actions with materialize, but the input tag didn't get recognized by the pattern. Is this possible?

              <div class="row">
                <ul class="collection with-header" v-if="listaRoles.length > 0">
                  <li class="collection-header left-align"><h4> Roles do perfil {{ perfil.descricao }}</h4></li>
                  <li v-for="r in listaRoles" :key="r.id" class="collection-item">
                    <div class="left-align">
                      <span> {{ r.descricao }} </span>
                    <input type="checkbox" />
                    </div>
                  </li>
                </ul>
              </div>

Answer 1

You have to use the exact same structure as the materialize docs, otherwise your components won't work correctly. So in the case of checkboxes that is <input>, followed by <span>, and both of these wrapped in a <label>.

  <label>
    <input type="checkbox" />
    <span>Red</span>
  </label>

Any deviation from this will break the component.

EDIT:

Checkboxes inside li works perfectly fine, here a codepen to demonstrate:

https://codepen.io/doughballs/pen/KKpNrPy

The error is coming from somewhere else.

https://materializecss.com/checkboxes.html