Checkbox

Checkboxes allow the user to select multiple options from a set. (Built-in with Ripple effect)

Demos

Basic Usage

<mdc-checkbox> is a web component. All we need to do is put the required script into your HTML document. Follow <mdc-checkbox>'s html structure and everything will be all set.

Required Script

<script async
        src="https://your-domain/pack-mdc-checkbox.js">        
</script>

Structure

Put input[type=checkbox] inside <mdc-checkbox> as its child.

<mdc-checkbox>
  <input type="checkbox"
         name="mdc-checkbox"
         value="mdc-checkbox-value" />
</mdc-checkbox>

JavaScript Instantiation

<mdc-checkbox> could also use JavaScript to create DOM element. Here comes some examples.

<script>
  var nodeAPI, nodeClasses;

  //use DOM api
  nodeAPI = document.createElement('mdc-checkbox');
  document.body.appendChild(nodeAPI);
  nodeAPI.name = 'YourName';
  nodeAPI.value = 'YourValue';

  //new Classes
  nodeClasses = new MdcCheckbox();
  document.body.appendChild(nodeClasses);
  nodeClasses.name = 'YourName';
  nodeClasses.value = 'YourValue';  
</script>

Style Customization

<mdc-checkbox> use CSS variables to style its interface. That means developer could easy change them into the lookup you like.

<style>
mdc-checkbox {
  --theme-color: #6200ee;
  --ripple-color: rgba(98,0,238,.2);
  --mdc-checkbox-border-color: rgba(0,0,0,.54);
}
</style>

Variants

<mdc-checkbox> supports some common state to let it become more convenience & useful.

Checked

Note that mdc-checkbox[checked] will trigger <mdc-checkbox> into checked state.

<mdc-checkbox checked>
  <input type="checkbox"
         name="mdc-checkbox"
         value="mdc-checkbox-value" />
</mdc-checkbox>

Disabled

Note that mdc-checkbox[disabled] is prevent hover / click / focus states from activating. (FormData will lost the input value when disabled attribute added.)

<mdc-checkbox disabled>
  <input type="checkbox"
         name="mdc-checkbox"
         value="mdc-checkbox-value" />
</mdc-checkbox>

Properties