Switch

Captures boolean input with an on/off switch interaction.

Usage

Want ice cream?


  <wc-switch value="true">Want ice cream?</wc-switch>
  <wc-switch value="true" with-icon="true">Want ice cream?</wc-switch>

States

Disabled

Make input look inactive by adding the disabled boolean attribute to any <input> element.

Disabled toggle


  <wc-switch disabled="true">Disabled toggle</wc-switch>
  <wc-switch disabled="true" value="true">Disabled toggle</wc-switch>

Events

On change of toggle value a CustomEvent goat:change is triggered by the element.

Change Event?


    <wc-switch id="change-toggle-field">Change Event?</wc-switch>
    <script>
      document.querySelector('#change-toggle-field').addEventListener('change', function(event) {
        myConsole.log('Input changed to :: ' + event.target.value);
      });
    </script>