How to get radio buttons work correctly for materialize css design

问题

here is the source code used for the portion of radio button. if I add materialize.min.css, then the radio button is not working on any browser. if I just put this code in online tester without put css file in. the code is working. what is going on for the radio button while using materialize css design?

<div class="row">
<form class="col s12">
  <h1 class="grey-text text-lighten-5">Tool Inventory Report</h1>
  <div class="row">
        <div class="input-field col s8">
          <p class="grey-text text-lighten-5"><b>Type:</b></p>
          <input name="grp1" type="radio" id="alltools" /><label for="alltools">All Tools</label>
          <input name="grp1" type="radio" id="handtool" /><label for="handtool">Hand Tool</label>
          <input name="grp1" type="radio" id="gardentool" /><label for="gardentool">Garden Tool</label>
          <input name="grp1" type="radio" id="ladder" /><label for="ladder">Ladder</label>
          <input name="grp1" type="radio" id="powertool" /><label for="powertool">Power Tool</label>
        </div>
        <div class="input-field col s4">
          <p class="grey-text text-lighten-5"><b>Customer Search:</b></p>
          <input type="text" class="form-control" placeholder="Enter Keyword" id="search" style="max-width: 80%; width: 60%;">
          <button class="btn btn-info btn-sm" type="submit">Search</button>
        </div>
  </div>
</form></div>

来源：https://stackoverflow.com/questions/47338362/how-to-get-radio-buttons-work-correctly-for-materialize-css-design