Switch
Toggles are used to enable or disable a single option. They provide immediate feedback about whether an option is active or inactive.
Usage
<base-switch value="true">Want ice cream?</base-switch>
<base-switch value="true" with-icon="true">Want ice cream?</base-switch>
States
Make input look inactive by adding the disabled boolean
attribute to any
<input> element.
<base-switch disabled="true">Disabled toggle</base-switch>
<base-switch disabled="true" value="true">Disabled toggle</base-switch>
Events
On change of toggle value a CustomEvent goat:change is
triggered by the element.
<base-switch id="change-toggle-field">Change Event?</base-switch>
<script>
document.querySelector('#change-toggle-field').addEventListener('change', function(event) {
myConsole.log('Input changed to :: ' + event.target.value);
});
</script>