Home Components Checkbox
Checkbox
Overview Playground API
Captures boolean input with an optional indeterminate mode.
Usage Here are several predefined checkbox styles, each serving its own semantic purpose.
Male Want ice cream? Join the group? 

  <goat-checkbox>Male</goat-checkbox>
  <goat-checkbox value="true">Want ice cream?</goat-checkbox>
  <goat-checkbox rounded="true">Join the group?</goat-checkbox>
Intermediate
All 

  <goat-checkbox value="false" intermediate="true">All</goat-checkbox>
Sizes Here are several predefined checkbox sizes, each serving its own semantic purpose.
Large Medium 

  <goat-checkbox size="lg">Large</goat-checkbox>
  <goat-checkbox>Medium</goat-checkbox>
Readonly Make input look inactive by adding the disabled boolean attribute to any <input> element.
Readonly checkbox Readonly checkbox 

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

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

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