material-checkbox

<!-- states -->
<material-checkbox label="Subscribe"></material-checkbox>
<material-checkbox label="Selected" checked></material-checkbox>
<material-checkbox label="Mixed" indeterminate></material-checkbox>
<material-checkbox label="Locked" disabled></material-checkbox>

<!-- two-line label via help-text — primary label position is anchored,
     so toggling help-text won't shift the row layout -->
<material-checkbox label="Marketing" help-text="Promotions and news"></material-checkbox>

<!-- error state: error-text replaces help-text and recolors the box.
     `error` alone (no errorText) still flips visuals — text slot stays empty -->
<material-checkbox label="Required" error error-text="This field is required"></material-checkbox>

<!-- standalone (no label, supply aria-label) -->
<material-checkbox aria-label="Select row"></material-checkbox>

<!-- form-associated -->
<form>
  <material-checkbox name="terms" value="accepted" required label="Accept terms"></material-checkbox>
</form>

<!-- listen for changes -->
<script>
  document.querySelector('material-checkbox')
    .addEventListener('change', e => console.log(e.detail));
</script>