Checkbox

        <coral-checkbox></coral-checkbox>
      

        <coral-checkbox checked="">Checked</coral-checkbox>
      

        <coral-checkbox indeterminate="">Indeterminate</coral-checkbox>
      

        <coral-checkbox disabled="">Disabled</coral-checkbox>
      

        <coral-checkbox checked="" disabled="">Checked and disabled</coral-checkbox>
      

        <coral-checkbox>Check</coral-checkbox>
        <coral-checkbox labelled="Check"></coral-checkbox>
      

        <div id="from-javascript"></div>
        <script>
          window.addEventListener('load', function() {
            var checkboxFromJS = document.createElement('coral-checkbox');
            checkboxFromJS.style.width = '149px';
            checkboxFromJS.textContent = 'Add Adobe Stock. Get one month free.*';
            document.getElementById('from-javascript').appendChild(checkboxFromJS);
          });
        </script>
      

        <div id="tri-state"></div>
        <script type="text/javascript">
          window.addEventListener('load', function() {
            var checkbox = document.createElement('coral-checkbox');
            checkbox.innerHTML = 'Cycle States by Clicking Me';
            var exampleDiv = document.getElementById('tri-state');
            exampleDiv.appendChild(checkbox);

            var state = 0;
            checkbox.addEventListener('change', function() {
              state++;
              switch(state) {
                case 1:
                  checkbox.checked = true;
                  checkbox.indeterminate = false;
                  break;
                case 2:
                  checkbox.checked = true;
                  checkbox.indeterminate = true;
                  break;
                case 3:
                  checkbox.checked = false;
                  checkbox.indeterminate = false;
                  state = 0;
                  break;
              }
            });
          });
        </script>