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

  Want ice cream?
Sizes Here are several predefined toggle sizes, each serving its own semantic purpose.
Large Medium


  
Large Medium
States Disabled Make input look inactive by adding the disabled boolean attribute to any <input> element.
Disabled toggle Disabled toggle

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

  Readonly toggle
  Readonly 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