Checkbox

<div class="container">
  <ef-checkbox>Unchecked</ef-checkbox>
  <ef-checkbox checked>Checked</ef-checkbox>
  <ef-checkbox indeterminate>Partially checked</ef-checkbox>
  <ef-checkbox style="width: 80px;">Fixed width</ef-checkbox>
</div>

.container {
  display: flex;
  flex-direction: column;
}

ef-checkbox {
  margin-left: 3px;
}

ef-checkbox is a form control for selecting one or several options. States of check box can be checked, unchecked, and indeterminate.

Using checkbox

Checkbox can be set to the checked state by adding the checked attribute. You can also use the attrribute to determine the current state of a checkbox. The indeterminate state can only be set by code, not by user interaction.

<ef-checkbox>Unchecked</ef-checkbox>
<ef-checkbox checked>Checked</ef-checkbox>
<ef-checkbox indeterminate>Partially checked</ef-checkbox>

ef-checkbox {
  margin-left: 3px;
}

<ef-checkbox>Unchecked</ef-checkbox>
<ef-checkbox checked>Checked</ef-checkbox>
<ef-checkbox indeterminate>Partially checked</ef-checkbox>

Disabled and readonly

ef-checkbox can be set to disabled or readonly by using the associated attributes.

<ef-checkbox checked>Default</ef-checkbox>
<ef-checkbox disabled checked>Disabled</ef-checkbox>
<ef-checkbox readonly checked>Readonly</ef-checkbox>

ef-checkbox {
  margin-left: 3px;
}

<ef-checkbox checked>Default</ef-checkbox>
<ef-checkbox disabled checked>Disabled</ef-checkbox>
<ef-checkbox readonly checked>Readonly</ef-checkbox>

Events

The checked-changed event can be used to recognize when the state of a checkbox has been changed. In code, the event can also check if the state is set to checked or indeterminate by querying the associated property.

<div class="container">
  <ef-checkbox id="Checkbox">Click Me</ef-checkbox>
  <span id="text"></span>
</div>

var checkbox = document.getElementById("Checkbox");
checkbox.addEventListener('checked-changed', function(e) {
  var text = e.target.checked ? 'Checked!' : 'Unchecked!';
  document.getElementById('text').textContent = text;
});

.container {
  display: inline-flex;
  align-items: center;
}

#text {
  padding-left: 20px;
}

ef-checkbox {
  margin-left: 3px;
}

<ef-checkbox id="Checkbox">Click Me</ef-checkbox>

<script>
  var checkbox = document.getElementById("Checkbox");
  checkbox.addEventListener('checked-changed', function (e) {
    e.target.checked ? console.log('Checked'):console.log('Unchecked')
    });
</script>