Checkboxes

Basic example

<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 type="checkbox" class="filled-in" checked="checked" />
      <span>Filled in</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</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" disabled="disabled" />
      <span>Brown</span>
    </label>
  </p>
</form>

Setup

Load the kmaterialize stylesheet once in your application. See Getting started for installation and browser-script setup.

import 'kmaterialize/dist/css/materialize.css';

Wrap each checkbox and its text in a <label>, with the text in a <span>. No JavaScript initialization is required. Set the native indeterminate property for a partially selected group.

document.querySelector('#indeterminate-checkbox').indeterminate = true;

Examples and variants

Checkboxes with icons

<label>
  <input type="checkbox" checked />
  <i class="material-icons checkbox-icon" aria-hidden="true">notifications</i>
  <span>Icon on the left</span>
</label>

<label>
  <input type="checkbox" />
  <span>Icon on the right</span>
  <i class="material-icons checkbox-icon" aria-hidden="true">favorite</i>
</label>

Validation

A required checkbox must be checked. For rules such as “select at least two,” validate the whole group in your application and associate one message with the group.

These previews keep their error state visible. In your form, show errors after checking a field or submitting, then clear them when the value is valid.

For text fields, use .input-field.error, aria-invalid="true", and a message linked with aria-describedby. Remove the error state when resolved. Use aria-live="polite" for messages updated dynamically.

<div>
    <label>
        <input id="validation-checkbox" type="checkbox" required aria-invalid="true" aria-describedby="validation-checkbox-error">
        <span>I agree to the project terms</span>
    </label>
    <p id="validation-checkbox-error" class="supporting-text error-text"><i class="material-icons" aria-hidden="true">error</i> Accept the terms before continuing.</p>
</div>

Reference

Attributes

Keyboard and accessibility

Use Tab to focus a checkbox and Space to toggle it. Give each choice a visible label. Group related choices with a <fieldset> and <legend>. An indeterminate checkbox still submits according to its checked state.