Home Components Toggle
Toggle
Overview Playground API
Captures boolean input with an optional indeterminate mode.
Usage
Want ice cream? 

  <goat-toggle value="true">Want ice cream?</goat-toggle>
Sizes Here are several predefined toggle sizes, each serving its own semantic purpose.
Large Medium 


  <div class="component-container">
    <goat-toggle size="lg">Large</goat-toggle>
    <goat-toggle>Medium</goat-toggle>
  </div>
States Disabled Make input look inactive by adding the disabled boolean attribute to any <input> element.
Disabled toggle Disabled toggle 

  <goat-toggle disabled>Disabled toggle</goat-toggle>
  <goat-toggle disabled value="true">Disabled toggle</goat-toggle>
Readonly Make input look inactive by adding the disabled boolean attribute to any <input> element.
Readonly toggle Readonly toggle 

  <goat-toggle readonly>Readonly toggle</goat-toggle>
  <goat-toggle readonly value="true">Readonly toggle</goat-toggle>
Events On change of toggle value a CustomEvent goat:change is triggered by the element. Change Event? 

      document.querySelector('#change-toggle-field').addEventListener('goat:change', function(event) {
        console.log('Input changed to :: ' + event.target.value);
      });
Usage Sizes States Events
Work in progress
Properties
Events
Methods
CSS Custom Properties
Previous Next