Use checkboxes when looking for yes or no answers. The for attribute is necessary to bind our custom checkbox with the input. Add the input's id as the value of the for attribute of the label.

Red

Yellow

Indeterminate Style

Green (Checked Disabled)

Brown (Unchecked Disabled)

          Copied!
          content_copy
          
  <form action="#">
    <p>
      <label>
        <input type="checkbox" />
        <span>Red</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" checked="checked" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <input id="indeterminate-checkbox" type="checkbox" />
        <span>Indeterminate Style</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" checked="checked" disabled="disabled" />
        <span>Green (Checked Disabled)</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" disabled="disabled" />
        <span>Brown (Unchecked Disabled)</span>
      </label>
    </p>
  </form>
        

Filled in

Add the filled-in class to the checkbox input to use the this style.

Red

Yellow

Indeterminate Style

Green (Checked Disabled)

Brown (Unchecked Disabled)

          Copied!
          content_copy
          
  <form action="#">
    <p>
      <label>
        <input type="checkbox" class="filled-in" />
        <span>Red</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in" checked="checked" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <input id="indeterminate-checkbox" type="checkbox" class="filled-in" />
        <span>Indeterminate Style</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in" checked="checked" disabled="disabled" />
        <span>Green (Checked Disabled)</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in" disabled="disabled" />
        <span>Brown (Unchecked Disabled)</span>
      </label>
    </p>
  </form>
        

Circle

Add the circle class to the checkbox input with filled-in class to make the checkbox circle.

Red

Yellow

Indeterminate Style

Green (Checked Disabled)

Brown (Unchecked Disabled)

          Copied!
          content_copy
          
  <form action="#">
    <p>
      <label>
        <input type="checkbox" class="filled-in circle" />
        <span>Red</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in circle" checked="checked" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <input id="indeterminate-checkbox" type="checkbox" class="filled-in circle" />
        <span>Indeterminate Style</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in circle" checked="checked" disabled="disabled" />
        <span>Green (Checked Disabled)</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in circle" disabled="disabled" />
        <span>Brown (Unchecked Disabled)</span>
      </label>
    </p>
  </form>
        

Soft

Add the soft class to the checkbox input with filled-in class to make the background less opaque.

Please note that you can also combine this with circle class.

Red

Yellow

Indeterminate Style

Green (Checked Disabled)

Brown (Unchecked Disabled)

          Copied!
          content_copy
          
  <form action="#">
    <p>
      <label>
        <input type="checkbox" class="filled-in soft" />
        <span>Red</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in soft" checked="checked" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <input id="indeterminate-checkbox" type="checkbox" class="filled-in soft" />
        <span>Indeterminate Style</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in soft" checked="checked" disabled="disabled" />
        <span>Green (Checked Disabled)</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in soft" disabled="disabled" />
        <span>Brown (Unchecked Disabled)</span>
      </label>
    </p>
  </form>