pwc-choices live example

by starikcetin

HTML

<head>
       <script type="module" src="https://unpkg.com/@paraboly/pwc-choices@latest/dist/pwc-choices/pwc-choices.esm.js"></script>
     </head>

     <body>
       <form name="pwc-choices">
         <div class="select">
           <header>Text / Tags</header>
           <pwc-choices name="text" type="text" value="Superstar,Gazelle" placeholder="add shoe..."></pwc-choices>
         </div>
         <div class="select">
           <header>Select / Dropdown</header>
           <pwc-choices name="single" type="single" value="Superstar,Gazelle,Stan Smith,Campus"></pwc-choices>
         </div>
         <div class="select">
           <header>Multiselect</header>
           <pwc-choices name="multiple" type="multiple"></pwc-choices>
         </div>
         <div class="submit">
           <button type="submit" class="btn">submit</button>
         </div>
       </form>
       <div class="values-container">
         <p class="values-container__text"></p>
       </div>

     </body>

CSS

* {
        box-sizing: border-box;
      }

      html {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        padding: 0.75rem;
      }

      html,
      body {
        width: 100%;
        margin: 0;
      }

      pwc-choices {
        position: relative;
        width: 100%;
        height: auto;
      }

      .select {
        padding: 1rem 0;
      }

      .submit {
        text-align: center;
      }

      .btn {
        background-color: #0d83ff;
        border: none;
        border-radius: 4px;
        color: #fff;
        font-size: 1rem;
        padding: 8px 12px;
        cursor: pointer;
      }

      .btn:hover {
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
      }

      .values-container {
        background-color: #f9f9f9;
        padding: 0.5rem;
        margin-top: 1rem;
      }

      .values-container .values-container__text {
        word-break: break-all;
        margin: 0;
      }

JavaScript

document.addEventListener("DOMContentLoaded", function() {
        var choices = [{
            value: "superstar",
            label: "Superstar",
            selected: false,
            disabled: false
          },
          {
            value: "adizero",
            label: "adizero",
            selected: false,
            disabled: false
          },
          {
            value: "stansmith",
            label: "Stan Smith",
            selected: true,
            disabled: false
          },
          {
            value: "gazelle",
            label: "Gazelle",
            selected: false,
            disabled: false
          },
          {
            value: "ultraboost",
            label: "ultraboost",
            selected: false,
            disabled: false
          },
          {
            value: "nmd",
            label: "NMD",
            selected: false,
            disabled: false
          },
          {
            value: "yeezy",
            label: "YEEZY",
            selected: false,
            disabled: false
          },
          {
            value: "campus",
            label: "Campus",
            selected: false,
            disabled: false
          },
          {
            value: "zx500",
            label: "ZX 500",
            selected: false,
            disabled: true
          },
          {
            value: "samba",
            label: "Samba",
            selected: false,
            disabled: false
          },
          {
            value: "predator",
            label: "Predator",
            selected: false,
            disabled: false
          },
          {
            value: "munchen",
            label: "Munchen",
            selected: false,
            disabled: false
          },
          {
            value: "zxflux",
            label: "ZX Flux",
            selected: false,
            disabled: false
          },
          {
            value: "eqt",
            label: "EQT",
            selected:...