checkbox-validation-demos.html

<dom-module id="checkbox-validation-demos">
  <template>
    <style include="vaadin-component-demo-shared-styles">
      :host {
        display: block;
      }
    </style>

    <h3>Required</h3>
    <vaadin-demo-snippet id="checkbox-required" when-defined="vaadin-checkbox-group">
      <template preserve-content>
        <vaadin-checkbox-group label="Required" required error-message="Please choose one option" theme="vertical">
          <vaadin-checkbox value="1">Option one</vaadin-checkbox>
          <vaadin-checkbox value="2">Option two</vaadin-checkbox>
          <vaadin-checkbox value="3">Option three</vaadin-checkbox>
        </vaadin-checkbox-group>
        <vaadin-button>Submit</vaadin-button>
        <script>
          window.addDemoReadyListener('#checkbox-required', function(document) {
            const submit = document.querySelector('vaadin-button');
            const checkboxGroup = document.querySelector('vaadin-checkbox-group');
            submit.addEventListener('click', function(event) {
              checkboxGroup.validate();
            });
          });
        </script>
      </template>
    </vaadin-demo-snippet>

  </template>
  <script>
    class CheckboxValidationDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
      static get is() {
        return 'checkbox-validation-demos';
      }
    }
    customElements.define(CheckboxValidationDemos.is, CheckboxValidationDemos);
  </script>
</dom-module>