packages/form-control/index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>FormControl demo page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <meta name="description" content="FormControl demo page" />
    <meta charset="UTF-8" />
    <link href="/demo/page.css" rel="stylesheet" />
  </head>
  <body>
    <form id="form">
      <h1>FormControlMixin demo</h1>

      <complex-demo
        name="complex-demo"
        minlength="5"
        pattern=".*lit$"
      >
        Example of how to implement a complex control
      </complex-demo>

      <div class="form-field">
        <label for="switch">Switch</label>
        <demo-switch id="switch" name="switch" value="switch-on" checked> </demo-switch>
      </div>

      <div class="form-field">
        <async-validator name="async" required></async-validator>
      </div>

      <div class="buttons">
        <button type="reset">Reset</button>
        <button type="submit">Submit</button>
      </div>
    </form>

    <script defer src="/demo/page.ts" type="module"></script>
    <script defer src="/demo/index.ts" type="module"></script>

    <form>
      <test-el name="foo"></test-el>
      <button type="submit">Continue</button>
    </form>
  </body>
</html>