Home Overview Toggle Toggle
Toggle is a component that allows the user to switch between two states.
Usage Want ice cream?

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


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

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

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