diff --git a/site/views/examples/forms-select-list.njk b/site/views/examples/forms-select-list.njk
index afdef7065..a29cef2fc 100644
--- a/site/views/examples/forms-select-list.njk
+++ b/site/views/examples/forms-select-list.njk
@@ -3,11 +3,11 @@ layout: content
 title: Forms - Select List
 seoTitle: Custom select list examples based on ESL web components
 name: Select List
-tags: [examples, beta]
+tags: [examples, playground]
 icon: examples/select-list.svg
 aside:
-  components:
-    - esl-select-list
+components:
+- esl-select-list
 ---
 
 <section class="row">
@@ -18,319 +18,74 @@ aside:
         width: 100%;
       }
     </style>
-      <form class="form bg-white border p-4" action="javascript: void 0;">
-        <div class="">
-          <div class="form-group p-1">
-            <label for="country_field" class="form-label">Please select your country:</label>
-            <esl-select-list class="border p-1" select-all-label="Select All Countries">
+    <uip-root>
+      <script type="text/html"
+              label="Custom"
+              uip-snippet
+              uip-isolated
+              uip-snippet-js="js-snippet-select-list-registration">
+        <form class="form bg-white border p-4"  style="min-height: 150px">
+          <div class="form-group">
+            <label for="color_field" class="form-label">Choose your favorite colors:</label>
+            <esl-select-list class="border"  style="display: block">
               <select esl-select-target
-                      id="country_field"
-                      name="country_field"
+                      id="color_field"
+                      name="color_field"
                       class="form-control">
-                <option>Afghanistan</option>
-                <option>Albania</option>
-                <option>Algeria</option>
-                <option>Andorra</option>
-                <option>Angola</option>
-                <option>Antigua and Barbuda</option>
-                <option>Argentina</option>
-                <option>Armenia</option>
-                <option>Australia</option>
-                <option>Austria</option>
-                <option>Azerbaijan</option>
-                <option>Bahamas</option>
-                <option>Bahrain</option>
-                <option>Bangladesh</option>
-                <option>Barbados</option>
-                <option>Belarus</option>
-                <option>Belgium</option>
-                <option>Belize</option>
-                <option>Benin</option>
-                <option>Bhutan</option>
-                <option>Bolivia</option>
-                <option>Bosnia and Herzegovina</option>
-                <option>Botswana</option>
-                <option>Brazil</option>
-                <option>Brunei</option>
-                <option>Bulgaria</option>
-                <option>Burkina Faso</option>
-                <option>Burundi</option>
-                <option>Côte d'Ivoire</option>
-                <option>Cabo Verde</option>
-                <option>Cambodia</option>
-                <option>Cameroon</option>
-                <option>Canada</option>
-                <option>Central African Republic</option>
-                <option>Chad</option>
-                <option>Chile</option>
-                <option>China</option>
-                <option>Colombia</option>
-                <option>Comoros</option>
-                <option>Congo (Congo-Brazzaville)</option>
-                <option>Costa Rica</option>
-                <option>Croatia</option>
-                <option>Cuba</option>
-                <option>Cyprus</option>
-                <option>Czechia (Czech Republic)</option>
-                <option>Democratic Republic of the Congo</option>
-                <option>Denmark</option>
-                <option>Djibouti</option>
-                <option>Dominica</option>
-                <option>Dominican Republic</option>
-                <option>Ecuador</option>
-                <option>Egypt</option>
-                <option>El Salvador</option>
-                <option>Equatorial Guinea</option>
-                <option>Eritrea</option>
-                <option>Estonia</option>
-                <option>Eswatini (fmr. "Swaziland")</option>
-                <option>Ethiopia</option>
-                <option>Fiji</option>
-                <option>Finland</option>
-                <option>France</option>
-                <option>Gabon</option>
-                <option>Gambia</option>
-                <option>Georgia</option>
-                <option>Germany</option>
-                <option>Ghana</option>
-                <option>Greece</option>
-                <option>Grenada</option>
-                <option>Guatemala</option>
-                <option>Guinea</option>
-                <option>Guinea-Bissau</option>
-                <option>Guyana</option>
-                <option>Haiti</option>
-                <option>Holy See</option>
-                <option>Honduras</option>
-                <option>Hungary</option>
-                <option>Iceland</option>
-                <option>India</option>
-                <option>Indonesia</option>
-                <option>Iran</option>
-                <option>Iraq</option>
-                <option>Ireland</option>
-                <option>Israel</option>
-                <option>Italy</option>
-                <option>Jamaica</option>
-                <option>Japan</option>
-                <option>Jordan</option>
-                <option>Kazakhstan</option>
-                <option>Kenya</option>
-                <option>Kiribati</option>
-                <option>Kuwait</option>
-                <option>Kyrgyzstan</option>
-                <option>Laos</option>
-                <option>Latvia</option>
-                <option>Lebanon</option>
-                <option>Lesotho</option>
-                <option>Liberia</option>
-                <option>Libya</option>
-                <option>Liechtenstein</option>
-                <option>Lithuania</option>
-                <option>Luxembourg</option>
-                <option>Madagascar</option>
-                <option>Malawi</option>
-                <option>Malaysia</option>
-                <option>Maldives</option>
-                <option>Mali</option>
-                <option>Malta</option>
-                <option>Marshall Islands</option>
-                <option>Mauritania</option>
-                <option>Mauritius</option>
-                <option>Mexico</option>
-                <option>Micronesia</option>
-                <option>Moldova</option>
-                <option>Monaco</option>
-                <option>Mongolia</option>
-                <option>Montenegro</option>
-                <option>Morocco</option>
-                <option>Mozambique</option>
-                <option>Myanmar (formerly Burma)</option>
-                <option>Namibia</option>
-                <option>Nauru</option>
-                <option>Nepal</option>
-                <option>Netherlands</option>
-                <option>New Zealand</option>
-                <option>Nicaragua</option>
-                <option>Niger</option>
-                <option>Nigeria</option>
-                <option>North Korea</option>
-                <option>North Macedonia</option>
-                <option>Norway</option>
-                <option>Oman</option>
-                <option>Pakistan</option>
-                <option>Palau</option>
-                <option>Palestine State</option>
-                <option>Panama</option>
-                <option>Papua New Guinea</option>
-                <option>Paraguay</option>
-                <option>Peru</option>
-                <option>Philippines</option>
-                <option selected>Poland</option>
-                <option>Portugal</option>
-                <option>Qatar</option>
-                <option>Romania</option>
-                <option>Russia</option>
-                <option>Rwanda</option>
-                <option>Saint Kitts and Nevis</option>
-                <option>Saint Lucia</option>
-                <option>Saint Vincent and the Grenadines</option>
-                <option>Samoa</option>
-                <option>San Marino</option>
-                <option>Sao Tome and Principe</option>
-                <option>Saudi Arabia</option>
-                <option>Senegal</option>
-                <option>Serbia</option>
-                <option>Seychelles</option>
-                <option>Sierra Leone</option>
-                <option>Singapore</option>
-                <option>Slovakia</option>
-                <option>Slovenia</option>
-                <option>Solomon Islands</option>
-                <option>Somalia</option>
-                <option>South Africa</option>
-                <option>South Korea</option>
-                <option>South Sudan</option>
-                <option>Spain</option>
-                <option>Sri Lanka</option>
-                <option>Sudan</option>
-                <option>Suriname</option>
-                <option>Sweden</option>
-                <option>Switzerland</option>
-                <option>Syria</option>
-                <option>Tajikistan</option>
-                <option>Tanzania</option>
-                <option>Thailand</option>
-                <option>Timor-Leste</option>
-                <option>Togo</option>
-                <option>Tonga</option>
-                <option>Trinidad and Tobago</option>
-                <option>Tunisia</option>
-                <option>Turkey</option>
-                <option>Turkmenistan</option>
-                <option>Tuvalu</option>
-                <option>Uganda</option>
-                <option>Ukraine</option>
-                <option>United Arab Emirates</option>
-                <option>United Kingdom</option>
-                <option>United States of America</option>
-                <option>Uruguay</option>
-                <option>Uzbekistan</option>
-                <option>Vanuatu</option>
-                <option>Venezuela</option>
-                <option>Vietnam</option>
-                <option>Yemen</option>
-                <option>Zambia</option>
-                <option>Zimbabwe</option>
+                <option class="disabled" value="#FF0000">Red</option>
+                <option value="#00FF00">Green</option>
+                <option value="#0000FF">Blue</option>
+                <option value="#FFFF00">Yellow</option>
+                <option value="#FFA500">Orange</option>
+                <option value="#800080">Purple</option>
+                <option value="#000000">Black</option>
               </select>
             </esl-select-list>
           </div>
 
-          <div class="form-group p-1">
-            <label for="color_field_3" class="form-label">Color List</label>
-            <esl-select-list class="border" select-all-label="Select All Colors">
-              <select esl-select-target
-                      multiple
-                      id="color_field_3"
-                      name="color_field_3"
-                      class="form-control">
-                <option value="" disabled>Disabled</option>
-                <option value="#0048BA">Absolute Zero</option>
-                <option value="#B0BF1A">Acid green</option>
-                <option value="#7CB9E8">Aero</option>
-                <option value="#C0E8D5">Aero blue</option>
-                <option value="#B284BE">African violet</option>
-                <option value="#72A0C1">Air superiority blue</option>
-                <option value="#EDEAE0">Alabaster</option>
-                <option value="#EFDECD">Almond</option>
-                <option value="#E52B50">Amaranth</option>
-                <option value="#3B7A57">Amazon</option>
-                <option value="#FFBF00">Amber</option>
-                <option value="#FF7E00">Amber (SAE/ECE)</option>
-                <option value="#9966CC">Amethyst</option>
-                <option value="#A4C639">Android green</option>
-                <option value="#CD9575">Antique brass</option>
-                <option value="#665D1E">Antique bronze</option>
-                <option value="#915C83">Antique fuchsia</option>
-                <option value="#841B2D">Antique ruby</option>
-                <option value="#BF4F51">Bittersweet shimmer</option>
-                <option value="#000000" selected>Black</option>
-                <option value="#1B1811">Black chocolate</option>
-                <option value="#3B2F2F">Black coffee</option>
-                <option value="#54626F">Black coral</option>
-                <option value="#3B3C36">Black olive</option>
-                <option value="#BFAFB2">Black Shadows</option>
-                <option value="#FFEBCD">Blanched almond</option>
-                <option value="#A57164">Blast-off bronze</option>
-                <option value="#DE5D83">Blush</option>
-                <option value="#79443B">Bole</option>
-                <option value="#E3DAC9">Bone</option>
-                <option value="#006A4E">Bottle green</option>
-                <option value="#87413F">Brandy</option>
-                <option value="#CB4154">Brick red</option>
-                <option value="#66FF00">Bright green</option>
-                <option value="#D891EF">Bright lilac</option>
-                <option value="#C32148">Bright maroon</option>
-                <option value="#1974D2">Bright navy blue</option>
-                <option value="#FFAA1D">Bright yellow (Crayola)</option>
-                <option value="#FF55A3">Brilliant rose</option>
-                <option value="#FB607F">Brink pink</option>
-                <option value="#004225">British racing green</option>
-                <option value="#CD7F32">Bronze</option>
-                <option value="#88540B">Brown</option>
-                <option value="#AF6E4D">Brown sugar</option>
-                <option value="#7BB661">Bud green</option>
-                <option value="#FFC680">Buff</option>
-                <option value="#800020">Burgundy</option>
-                <option value="#DEB887">Burlywood</option>
-                <option value="#A17A74">Burnished brown</option>
-                <option value="#CC5500">Burnt orange</option>
-                <option value="#E97451">Burnt sienna</option>
-                <option value="#8A3324">Burnt umber</option>
-                <option value="#BD33A4">Byzantine</option>
-                <option value="#702963">Byzantium</option>
-                <option value="#536872">Cadet</option>
-                <option value="#5F9EA0">Cadet blue</option>
-                <option value="#A9B2C3">Cadet blue (Crayola)</option>
-                <option value="#91A3B0">Cadet grey</option>
-                <option value="#006B3C">Cadmium green</option>
-                <option value="#ED872D">Cadmium orange</option>
-                <option value="#E30022">Cadmium red</option>
-              </select>
-            </esl-select-list>
+          <div class="form-group">
+            <button class="btn btn-sec-blue" onclick="">Submit</button>
+            <button type="reset" class="btn btn-sec-orange">Reset</button>
           </div>
-        </div>
-        <div class="form-group">
-          <button class="btn btn-sec-blue">Submit</button>
-          <button type="reset" class="btn btn-sec-orange">Reset</button>
-        </div>
-      </form>
+          <div class="demo-info panel panel-info">
+          </div>
+        </form>
+      </script>
+      <script id="js-snippet-select-list-registration" type="text/plain">
+  import {ESLSelect, ESLScrollbar} from '@exadel/esl';
+  ESLSelect.register();
+
+  function updateFormInfo(event) {
+    const form = document.querySelector('.form');
+    const info = document.querySelector('.demo-info');
 
-    <div class="demo-info panel panel-info">
-    </div>
-    <script>
-      (function () {
-        var form = document.querySelector('form');
-        var info = document.querySelector('.demo-info');
-        if (!info) return;
+    event.preventDefault();
+    const data = {};
+    const formData = new FormData(form);
+
+    formData.forEach((value, key) => {
+      if (data[key]) {
+        data[key] = [].concat(data[key], value);
+      } else {
+        data[key] = value;
+      }
+    });
 
-        function upd() {
-          var data = {};
-          var formData = new FormData(form);
-          formData.forEach(function (value, key) {
-            if (key in data) {
-              data[key] = [].concat(data[key]).concat(value);
-            } else {
-              data[key] = value;
-            }
-          });
+    info.textContent = JSON.stringify(data, null, 2);
+    info.removeAttribute('hidden');
+  }
 
-          info.textContent = JSON.stringify(data, null, 2);
-          info.removeAttribute('hidden');
-        }
+  document.addEventListener('submit', updateFormInfo);
+      </script>
 
-        form.addEventListener('submit', upd);
-      })();
-    </script>
+      <uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
+      <uip-preview></uip-preview>
+      <uip-settings target="esl-select-list" label="Settings" resizable vertical="@+sm">
+        <uip-bool-setting label="Multiple" attribute="multiple" target="select"></uip-bool-setting>
+        <uip-bool-setting label="Disabled" attribute="disabled" target=".disabled"></uip-bool-setting>
+      </uip-settings>
+      <uip-editor label="Source code (HTML)" collapsible copy></uip-editor>
+      <uip-editor source="js" label="Source code (JS)" collapsible collapsed copy></uip-editor>
+    </uip-root>
   </div>
 </section>
diff --git a/site/views/examples/forms-select.njk b/site/views/examples/forms-select.njk
index 6ab65c14b..7e02e4bd4 100644
--- a/site/views/examples/forms-select.njk
+++ b/site/views/examples/forms-select.njk
@@ -3,11 +3,11 @@ layout: content
 title: Forms - Select Dropdown
 seoTitle: Custom select dropdown examples based on ESL web components
 name: Select Dropdown
-tags: [examples, beta]
+tags: [examples, playground]
 icon: examples/select-dropdown.svg
 aside:
-  components:
-    - esl-select
+components:
+- esl-select
 ---
 
 <section class="row">
@@ -18,678 +18,89 @@ aside:
         width: 100%;
       }
     </style>
-    <form class="form bg-white border p-4" action="javascript: void 0;">
-      <div class="">
-        <div class="form-group">
-          <label for="country_field" class="form-label">Please select your country: </label>
-          <esl-select style="display: block"
-                      placeholder="Country"
-                      select-all-label="Select All Countries">
-            <select esl-select-target
-                    id="country_field"
-                    name="country_field"
-                    class="form-control">
-              <option>Afghanistan</option>
-              <option>Albania</option>
-              <option>Algeria</option>
-              <option>Andorra</option>
-              <option>Angola</option>
-              <option>Antigua and Barbuda</option>
-              <option>Argentina</option>
-              <option>Armenia</option>
-              <option>Australia</option>
-              <option>Austria</option>
-              <option>Azerbaijan</option>
-              <option>Bahamas</option>
-              <option>Bahrain</option>
-              <option>Bangladesh</option>
-              <option>Barbados</option>
-              <option>Belarus</option>
-              <option>Belgium</option>
-              <option>Belize</option>
-              <option>Benin</option>
-              <option>Bhutan</option>
-              <option>Bolivia</option>
-              <option>Bosnia and Herzegovina</option>
-              <option>Botswana</option>
-              <option>Brazil</option>
-              <option>Brunei</option>
-              <option>Bulgaria</option>
-              <option>Burkina Faso</option>
-              <option>Burundi</option>
-              <option>Côte d'Ivoire</option>
-              <option>Cabo Verde</option>
-              <option>Cambodia</option>
-              <option>Cameroon</option>
-              <option>Canada</option>
-              <option>Central African Republic</option>
-              <option>Chad</option>
-              <option>Chile</option>
-              <option>China</option>
-              <option>Colombia</option>
-              <option>Comoros</option>
-              <option>Congo (Congo-Brazzaville)</option>
-              <option>Costa Rica</option>
-              <option>Croatia</option>
-              <option>Cuba</option>
-              <option>Cyprus</option>
-              <option>Czechia (Czech Republic)</option>
-              <option>Democratic Republic of the Congo</option>
-              <option>Denmark</option>
-              <option>Djibouti</option>
-              <option>Dominica</option>
-              <option>Dominican Republic</option>
-              <option>Ecuador</option>
-              <option>Egypt</option>
-              <option>El Salvador</option>
-              <option>Equatorial Guinea</option>
-              <option>Eritrea</option>
-              <option>Estonia</option>
-              <option>Eswatini (fmr. "Swaziland")</option>
-              <option>Ethiopia</option>
-              <option>Fiji</option>
-              <option>Finland</option>
-              <option>France</option>
-              <option>Gabon</option>
-              <option>Gambia</option>
-              <option>Georgia</option>
-              <option>Germany</option>
-              <option>Ghana</option>
-              <option>Greece</option>
-              <option>Grenada</option>
-              <option>Guatemala</option>
-              <option>Guinea</option>
-              <option>Guinea-Bissau</option>
-              <option>Guyana</option>
-              <option>Haiti</option>
-              <option>Holy See</option>
-              <option>Honduras</option>
-              <option>Hungary</option>
-              <option>Iceland</option>
-              <option>India</option>
-              <option>Indonesia</option>
-              <option>Iran</option>
-              <option>Iraq</option>
-              <option>Ireland</option>
-              <option>Israel</option>
-              <option>Italy</option>
-              <option>Jamaica</option>
-              <option>Japan</option>
-              <option>Jordan</option>
-              <option>Kazakhstan</option>
-              <option>Kenya</option>
-              <option>Kiribati</option>
-              <option>Kuwait</option>
-              <option>Kyrgyzstan</option>
-              <option>Laos</option>
-              <option>Latvia</option>
-              <option>Lebanon</option>
-              <option>Lesotho</option>
-              <option>Liberia</option>
-              <option>Libya</option>
-              <option>Liechtenstein</option>
-              <option>Lithuania</option>
-              <option>Luxembourg</option>
-              <option>Madagascar</option>
-              <option>Malawi</option>
-              <option>Malaysia</option>
-              <option>Maldives</option>
-              <option>Mali</option>
-              <option>Malta</option>
-              <option>Marshall Islands</option>
-              <option>Mauritania</option>
-              <option>Mauritius</option>
-              <option>Mexico</option>
-              <option>Micronesia</option>
-              <option>Moldova</option>
-              <option>Monaco</option>
-              <option>Mongolia</option>
-              <option>Montenegro</option>
-              <option>Morocco</option>
-              <option>Mozambique</option>
-              <option>Myanmar (formerly Burma)</option>
-              <option>Namibia</option>
-              <option>Nauru</option>
-              <option>Nepal</option>
-              <option>Netherlands</option>
-              <option>New Zealand</option>
-              <option>Nicaragua</option>
-              <option>Niger</option>
-              <option>Nigeria</option>
-              <option>North Korea</option>
-              <option>North Macedonia</option>
-              <option>Norway</option>
-              <option>Oman</option>
-              <option>Pakistan</option>
-              <option>Palau</option>
-              <option>Palestine State</option>
-              <option>Panama</option>
-              <option>Papua New Guinea</option>
-              <option>Paraguay</option>
-              <option>Peru</option>
-              <option>Philippines</option>
-              <option selected>Poland</option>
-              <option>Portugal</option>
-              <option>Qatar</option>
-              <option>Romania</option>
-              <option>Russia</option>
-              <option>Rwanda</option>
-              <option>Saint Kitts and Nevis</option>
-              <option>Saint Lucia</option>
-              <option>Saint Vincent and the Grenadines</option>
-              <option>Samoa</option>
-              <option>San Marino</option>
-              <option>Sao Tome and Principe</option>
-              <option>Saudi Arabia</option>
-              <option>Senegal</option>
-              <option>Serbia</option>
-              <option>Seychelles</option>
-              <option>Sierra Leone</option>
-              <option>Singapore</option>
-              <option>Slovakia</option>
-              <option>Slovenia</option>
-              <option>Solomon Islands</option>
-              <option>Somalia</option>
-              <option>South Africa</option>
-              <option>South Korea</option>
-              <option>South Sudan</option>
-              <option>Spain</option>
-              <option>Sri Lanka</option>
-              <option>Sudan</option>
-              <option>Suriname</option>
-              <option>Sweden</option>
-              <option>Switzerland</option>
-              <option>Syria</option>
-              <option>Tajikistan</option>
-              <option>Tanzania</option>
-              <option>Thailand</option>
-              <option>Timor-Leste</option>
-              <option>Togo</option>
-              <option>Tonga</option>
-              <option>Trinidad and Tobago</option>
-              <option>Tunisia</option>
-              <option>Turkey</option>
-              <option>Turkmenistan</option>
-              <option>Tuvalu</option>
-              <option>Uganda</option>
-              <option>Ukraine</option>
-              <option>United Arab Emirates</option>
-              <option>United Kingdom</option>
-              <option>United States of America</option>
-              <option>Uruguay</option>
-              <option>Uzbekistan</option>
-              <option>Vanuatu</option>
-              <option>Venezuela</option>
-              <option>Vietnam</option>
-              <option>Yemen</option>
-              <option>Zambia</option>
-              <option>Zimbabwe</option>
-            </select>
-          </esl-select>
-        </div>
+    <uip-root>
+      <script type="text/html"
+              label="Custom"
+              uip-snippet
+              uip-isolated
+              uip-snippet-js="js-snippet-select-registration">
+        <form class="form bg-white border p-4" style="min-height: 250px">
+          <div class="form-group">
+            <label for="country_field" class="form-label">Please select your country: </label>
+            <esl-select style="display: block"
+                        placeholder="Country"
+                        select-all-label="Select All Countries">
+              <select esl-select-target
+                      id="country_field"
+                      name="country_field"
+                      class="form-control">
+                <option class="disabled" value="USA">United States</option>
+                <option value="CAN">Canada</option>
+                <option value="GBR">United Kingdom</option>
+                <option value="AUS">Australia</option>
+                <option value="DEU">Germany</option>
+                <option value="FRA">France</option>
+                <option value="ESP">Spain</option>
+                <option value="ITA">Italy</option>
+                <option value="CHN">China</option>
+                <option value="JPN">Japan</option>
+                <option value="BRA">Brazil</option>
+                <option value="IND">India</option>
+                <option value="MEX">Mexico</option>
+                <option value="ZAF">South Africa</option>
+                <option value="ARG">Argentina</option>
+                <option value="SWE">Sweden</option>
+                <option value="NOR">Norway</option>
+                <option value="POL">Poland</option>
+              </select>
+            </esl-select>
+          </div>
+          <div class="form-group">
+            <button class="btn btn-sec-blue">Submit</button>
+            <button type="reset" class="btn btn-sec-orange">Reset</button>
+          </div>
+          <div class="demo-info panel panel-info">
+          </div>
+        </form>
+      </script>
+      <script id="js-snippet-select-registration" type="text/plain">
+  import {ESLSelect, ESLScrollbar} from '@exadel/esl';
+  ESLSelect.register();
+  ESLScrollbar.register();
 
-        <esl-select class="form-group"
-                    style="display: block"
-                    pin-selected
-                    placeholder="Color"
-                    select-all-label="All Colors">
-          <label for="color_field" class="form-label">Color</label>
-          <select esl-select-target
-                  multiple
-                  id="color_field"
-                  name="color_field"
-                  class="form-control">
-            <option value="" disabled>Disabled</option>
-            <option value="#0048BA">Absolute Zero</option>
-            <option value="#B0BF1A">Acid green</option>
-            <option value="#7CB9E8" selected>Aero</option>
-            <option value="#C0E8D5" selected>Aero blue</option>
-            <option value="#B284BE">African violet</option>
-            <option value="#72A0C1">Air superiority blue</option>
-            <option value="#EDEAE0">Alabaster</option>
-            <option value="#F0F8FF">Alice blue</option>
-            <option value="#C46210">Alloy orange</option>
-            <option value="#EFDECD">Almond</option>
-            <option value="#E52B50">Amaranth</option>
-            <option value="#9F2B68">Amaranth (MnP)</option>
-            <option value="#F19CBB">Amaranth pink</option>
-            <option value="#AB274F">Amaranth purple</option>
-            <option value="#D3212D">Amaranth red</option>
-            <option value="#3B7A57">Amazon</option>
-            <option value="#FFBF00">Amber</option>
-            <option value="#FF7E00">Amber (SAE/ECE)</option>
-            <option value="#9966CC">Amethyst</option>
-            <option value="#A4C639">Android green</option>
-            <option value="#CD9575">Antique brass</option>
-            <option value="#665D1E">Antique bronze</option>
-            <option value="#915C83">Antique fuchsia</option>
-            <option value="#841B2D">Antique ruby</option>
-            <option value="#FAEBD7">Antique white</option>
-            <option value="#008000">Ao (English)</option>
-            <option value="#8DB600">Apple green</option>
-            <option value="#FBCEB1">Apricot</option>
-            <option value="#7FFFD4">Aquamarine</option>
-            <option value="#D0FF14">Arctic lime</option>
-            <option value="#4B5320">Army green</option>
-            <option value="#8F9779">Artichoke</option>
-            <option value="#E9D66B">Arylide yellow</option>
-            <option value="#B2BEB5">Ash gray</option>
-            <option value="#87A96B">Asparagus</option>
-            <option value="#FF9966">Atomic tangerine</option>
-            <option value="#A52A2A">Auburn</option>
-            <option value="#FDEE00">Aureolin</option>
-            <option value="#568203">Avocado</option>
-            <option value="#007FFF">Azure</option>
-            <option value="#F0FFFF">Azure (X11/web color)</option>
-            <option value="#89CFF0">Baby blue</option>
-            <option value="#A1CAF1">Baby blue eyes</option>
-            <option value="#F4C2C2">Baby pink</option>
-            <option value="#FEFEFA">Baby powder</option>
-            <option value="#FF91AF">Baker-Miller pink</option>
-            <option value="#FAE7B5">Banana Mania</option>
-            <option value="#DA1884">Barbie Pink</option>
-            <option value="#7C0A02">Barn red</option>
-            <option value="#848482">Battleship grey</option>
-            <option value="#BCD4E6">Beau blue</option>
-            <option value="#9F8170">Beaver</option>
-            <option value="#F5F5DC">Beige</option>
-            <option value="#2E5894">B'dazzled blue</option>
-            <option value="#9C2542">Big dip o’ruby</option>
-            <option value="#FFE4C4">Bisque</option>
-            <option value="#3D2B1F">Bistre</option>
-            <option value="#CAE00D">Bitter lemon</option>
-            <option value="#BFFF00">Bitter lime</option>
-            <option value="#FE6F5E">Bittersweet</option>
-            <option value="#BF4F51">Bittersweet shimmer</option>
-            <option value="#000000">Black</option>
-            <option value="#3D0C02">Black bean</option>
-            <option value="#1B1811">Black chocolate</option>
-            <option value="#3B2F2F">Black coffee</option>
-            <option value="#54626F">Black coral</option>
-            <option value="#3B3C36">Black olive</option>
-            <option value="#BFAFB2">Black Shadows</option>
-            <option value="#FFEBCD">Blanched almond</option>
-            <option value="#A57164">Blast-off bronze</option>
-            <option value="#318CE7">Bleu de France</option>
-            <option value="#ACE5EE">Blizzard blue</option>
-            <option value="#FAF0BE">Blond</option>
-            <option value="#660000">Blood red</option>
-            <option value="#0000FF">Blue</option>
-            <option value="#1F75FE">Blue (Crayola)</option>
-            <option value="#0093AF">Blue (Munsell)</option>
-            <option value="#0087BD">Blue (NCS)</option>
-            <option value="#0018A8">Blue (Pantone)</option>
-            <option value="#333399">Blue (pigment)</option>
-            <option value="#0247FE">Blue (RYB)</option>
-            <option value="#A2A2D0">Blue bell</option>
-            <option value="#6699CC">Blue-gray</option>
-            <option value="#0D98BA">Blue-green</option>
-            <option value="#064E40">Blue-green (color wheel)</option>
-            <option value="#5DADEC">Blue jeans</option>
-            <option value="#126180">Blue sapphire</option>
-            <option value="#8A2BE2">Blue-violet</option>
-            <option value="#7366BD">Blue-violet (Crayola)</option>
-            <option value="#4D1A7F">Blue-violet (color wheel)</option>
-            <option value="#5072A7">Blue yonder</option>
-            <option value="#3C69E7">Bluetiful</option>
-            <option value="#DE5D83">Blush</option>
-            <option value="#79443B">Bole</option>
-            <option value="#E3DAC9">Bone</option>
-            <option value="#006A4E">Bottle green</option>
-            <option value="#87413F">Brandy</option>
-            <option value="#CB4154">Brick red</option>
-            <option value="#66FF00">Bright green</option>
-            <option value="#D891EF">Bright lilac</option>
-            <option value="#C32148">Bright maroon</option>
-            <option value="#1974D2">Bright navy blue</option>
-            <option value="#FFAA1D">Bright yellow (Crayola)</option>
-            <option value="#FF55A3">Brilliant rose</option>
-            <option value="#FB607F">Brink pink</option>
-            <option value="#004225">British racing green</option>
-            <option value="#CD7F32">Bronze</option>
-            <option value="#88540B">Brown</option>
-            <option value="#AF6E4D">Brown sugar</option>
-            <option value="#7BB661">Bud green</option>
-            <option value="#FFC680">Buff</option>
-            <option value="#800020">Burgundy</option>
-            <option value="#DEB887">Burlywood</option>
-            <option value="#A17A74">Burnished brown</option>
-            <option value="#CC5500">Burnt orange</option>
-            <option value="#E97451">Burnt sienna</option>
-            <option value="#8A3324">Burnt umber</option>
-            <option value="#BD33A4">Byzantine</option>
-            <option value="#702963">Byzantium</option>
-            <option value="#536872">Cadet</option>
-            <option value="#5F9EA0">Cadet blue</option>
-            <option value="#A9B2C3">Cadet blue (Crayola)</option>
-            <option value="#91A3B0">Cadet grey</option>
-            <option value="#006B3C">Cadmium green</option>
-            <option value="#ED872D">Cadmium orange</option>
-            <option value="#E30022">Cadmium red</option>
-            <option value="#FFF600">Cadmium yellow</option>
-            <option value="#A67B5B">Café au lait</option>
-            <option value="#4B3621">Café noir</option>
-            <option value="#A3C1AD">Cambridge blue</option>
-            <option value="#C19A6B">Camel</option>
-            <option value="#EFBBCC">Cameo pink</option>
-            <option value="#FFFF99">Canary</option>
-            <option value="#FFEF00">Canary yellow</option>
-            <option value="#FF0800">Candy apple red</option>
-            <option value="#E4717A">Candy pink</option>
-            <option value="#592720">Caput mortuum</option>
-            <option value="#C41E3A">Cardinal</option>
-            <option value="#00CC99">Caribbean green</option>
-            <option value="#960018">Carmine</option>
-            <option value="#D70040">Carmine (M&P)</option>
-            <option value="#FFA6C9">Carnation pink</option>
-            <option value="#56A0D3">Carolina blue</option>
-            <option value="#ED9121">Carrot orange</option>
-            <option value="#00563F">Castleton green</option>
-            <option value="#703642">Catawba</option>
-            <option value="#C95A49">Cedar Chest</option>
-            <option value="#ACE1AF">Celadon</option>
-            <option value="#2F847C">Celadon green</option>
-            <option value="#B2FFFF">Celeste</option>
-            <option value="#246BCE">Celtic blue</option>
-            <option value="#DE3163">Cerise</option>
-            <option value="#007BA7">Cerulean</option>
-            <option value="#6D9BC3">Cerulean frost</option>
-            <option value="#1DACD6">Cerulean (Crayola)</option>
-            <option value="#007AA5">CG blue</option>
-            <option value="#E03C31">CG red</option>
-            <option value="#F7E7CE">Champagne</option>
-            <option value="#F1DDCF">Champagne pink</option>
-            <option value="#36454F">Charcoal</option>
-            <option value="#232B2B">Charleston green</option>
-            <option value="#E68FAC">Charm pink</option>
-            <option value="#DFFF00">Chartreuse (traditional)</option>
-            <option value="#7FFF00">Chartreuse (web)</option>
-            <option value="#FFB7C5">Cherry blossom pink</option>
-            <option value="#954535">Chestnut</option>
-            <option value="#E23D28">Chili red</option>
-            <option value="#DE6FA1">China pink</option>
-            <option value="#A8516E">China rose</option>
-            <option value="#AA381E">Chinese red</option>
-            <option value="#856088">Chinese violet</option>
-            <option value="#FFB200">Chinese yellow</option>
-            <option value="#7B3F00">Chocolate (traditional)</option>
-            <option value="#D2691E">Chocolate (web)</option>
-            <option value="#58111A">Chocolate Cosmos</option>
-            <option value="#FFA700">Chrome yellow</option>
-            <option value="#98817B">Cinereous</option>
-            <option value="#E34234">Cinnabar</option>
-            <option value="#CD607E">Cinnamon Satin</option>
-            <option value="#E4D00A">Citrine</option>
-            <option value="#9FA91F">Citron</option>
-            <option value="#7F1734">Claret</option>
-            <option value="#0047AB">Cobalt blue</option>
-            <option value="#6F4E37">Coffee</option>
-            <option value="#B9D9EB">Columbia Blue</option>
-            <option value="#8C92AC">Cool grey</option>
-            <option value="#B87333">Copper</option>
-            <option value="#DA8A67">Copper (Crayola)</option>
-            <option value="#AD6F69">Copper penny</option>
-            <option value="#CB6D51">Copper red</option>
-            <option value="#996666">Copper rose</option>
-            <option value="#FF3800">Coquelicot</option>
-            <option value="#FF7F50">Coral</option>
-            <option value="#F88379">Coral pink</option>
-            <option value="#893F45">Cordovan</option>
-            <option value="#FBEC5D">Corn</option>
-            <option value="#B31B1B">Cornell red</option>
-            <option value="#6495ED">Cornflower blue</option>
-            <option value="#FFF8DC">Cornsilk</option>
-            <option value="#2E2D88">Cosmic cobalt</option>
-            <option value="#FFF8E7">Cosmic latte</option>
-            <option value="#81613C">Coyote brown</option>
-            <option value="#FFBCD9">Cotton candy</option>
-            <option value="#FFFDD0">Cream</option>
-            <option value="#DC143C">Crimson</option>
-            <option value="#9E1B32">Crimson (UA)</option>
-            <option value="#A7D8DE">Crystal</option>
-            <option value="#F5F5F5">Cultured</option>
-            <option value="#00FFFF">Cyan</option>
-            <option value="#00B7EB">Cyan (process)</option>
-            <option value="#58427C">Cyber grape</option>
-            <option value="#FFD300">Cyber yellow</option>
-            <option value="#F56FA1">Cyclamen</option>
-            <option value="#666699">Dark blue-gray</option>
-            <option value="#654321">Dark brown</option>
-            <option value="#5D3954">Dark byzantium</option>
-            <option value="#26428B">Dark cornflower blue</option>
-            <option value="#008B8B">Dark cyan</option>
-            <option value="#536878">Dark electric blue</option>
-            <option value="#B8860B">Dark goldenrod</option>
-            <option value="#013220">Dark green</option>
-            <option value="#006400">Dark green (X11)</option>
-            <option value="#1A2421">Dark jungle green</option>
-            <option value="#BDB76B">Dark khaki</option>
-            <option value="#483C32">Dark lava</option>
-            <option value="#534B4F">Dark liver</option>
-            <option value="#543D37">Dark liver (horses)</option>
-            <option value="#8B008B">Dark magenta</option>
-            <option value="#4A5D23">Dark moss green</option>
-            <option value="#556B2F">Dark olive green</option>
-            <option value="#FF8C00">Dark orange</option>
-            <option value="#9932CC">Dark orchid</option>
-            <option value="#03C03C">Dark pastel green</option>
-            <option value="#301934">Dark purple</option>
-            <option value="#8B0000">Dark red</option>
-            <option value="#E9967A">Dark salmon</option>
-            <option value="#8FBC8F">Dark sea green</option>
-            <option value="#3C1414">Dark sienna</option>
-            <option value="#8CBED6">Dark sky blue</option>
-            <option value="#483D8B">Dark slate blue</option>
-            <option value="#2F4F4F">Dark slate gray</option>
-            <option value="#177245">Dark spring green</option>
-            <option value="#00CED1">Dark turquoise</option>
-            <option value="#9400D3">Dark violet</option>
-            <option value="#00703C">Dartmouth green</option>
-            <option value="#555555">Davy's grey</option>
-            <option value="#DA3287">Deep cerise</option>
-            <option value="#FAD6A5">Deep champagne</option>
-            <option value="#B94E48">Deep chestnut</option>
-            <option value="#004B49">Deep jungle green</option>
-            <option value="#FF1493">Deep pink</option>
-            <option value="#FF9933">Deep saffron</option>
-            <option value="#00BFFF">Deep sky blue</option>
-            <option value="#4A646C">Deep Space Sparkle</option>
-            <option value="#7E5E60">Deep taupe</option>
-            <option value="#1560BD">Denim</option>
-            <option value="#2243B6">Denim blue</option>
-            <option value="#EDC9AF">Desert sand</option>
-            <option value="#696969">Dim gray</option>
-            <option value="#1E90FF">Dodger blue</option>
-            <option value="#D71868">Dogwood rose</option>
-            <option value="#967117">Drab</option>
-            <option value="#00009C">Duke blue</option>
-            <option value="#EFDFBB">Dutch white</option>
-            <option value="#E1A95F">Earth yellow</option>
-            <option value="#555D50">Ebony</option>
-            <option value="#C2B280">Ecru</option>
-            <option value="#1B1B1B">Eerie black</option>
-            <option value="#614051">Eggplant</option>
-            <option value="#F0EAD6">Eggshell</option>
-            <option value="#1034A6">Egyptian blue</option>
-            <option value="#16161D">Eigengrau</option>
-            <option value="#7DF9FF">Electric blue</option>
-            <option value="#00FF00">Electric green</option>
-            <option value="#6F00FF">Electric indigo</option>
-            <option value="#CCFF00">Electric lime</option>
-            <option value="#BF00FF">Electric purple</option>
-            <option value="#8F00FF">Electric violet</option>
-            <option value="#50C878">Emerald</option>
-            <option value="#6C3082">Eminence</option>
-            <option value="#1B4D3E">English green</option>
-            <option value="#B48395">English lavender</option>
-            <option value="#AB4B52">English red</option>
-            <option value="#CC474B">English vermillion</option>
-            <option value="#563C5C">English violet</option>
-            <option value="#00FF40">Erin</option>
-            <option value="#96C8A2">Eton blue</option>
-            <option value="#801818">Falu red</option>
-            <option value="#B53389">Fandango</option>
-            <option value="#DE5285">Fandango pink</option>
-            <option value="#F400A1">Fashion fuchsia</option>
-            <option value="#E5AA70">Fawn</option>
-            <option value="#4D5D53">Feldgrau</option>
-            <option value="#4F7942">Fern green</option>
-            <option value="#6C541E">Field drab</option>
-            <option value="#FF5470">Fiery rose</option>
-            <option value="#B22222">Firebrick</option>
-            <option value="#CE2029">Fire engine red</option>
-            <option value="#E95C4B">Fire opal</option>
-            <option value="#E25822">Flame</option>
-            <option value="#EEDC82">Flax</option>
-            <option value="#A2006D">Flirt</option>
-            <option value="#FFFAF0">Floral white</option>
-            <option value="#15F4EE">Fluorescent blue</option>
-            <option value="#5FA777">Forest green (Crayola)</option>
-            <option value="#014421">Forest green (traditional)</option>
-            <option value="#228B22">Forest green (web)</option>
-            <option value="#856D4D">French bistre</option>
-            <option value="#0072BB">French blue</option>
-            <option value="#FD3F92">French fuchsia</option>
-            <option value="#86608E">French lilac</option>
-            <option value="#9EFD38">French lime</option>
-            <option value="#D473D4">French mauve</option>
-            <option value="#FD6C9E">French pink</option>
-            <option value="#C72C48">French raspberry</option>
-            <option value="#F64A8A">French rose</option>
-            <option value="#77B5FE">French sky blue</option>
-            <option value="#8806CE">French violet</option>
-            <option value="#E936A7">Frostbite</option>
-            <option value="#FF00FF">Fuchsia</option>
-            <option value="#C154C1">Fuchsia (Crayola)</option>
-            <option value="#CC397B">Fuchsia purple</option>
-            <option value="#C74375">Fuchsia rose</option>
-            <option value="#E48400">Fulvous</option>
-            <option value="#87421F">Fuzzy Wuzzy</option>
-          </select>
-        </esl-select>
-        <esl-select class="form-group"
-                    style="display: block"
-                    pin-selected
-                    placeholder="Color 2"
-                    select-all-label="All Colors">
-          <label for="color_field_2" class="form-label">Color 2</label>
-          <select esl-select-target
-                  multiple
-                  id="color_field_2"
-                  name="color_field_2"
-                  class="form-control">
-            <option value="#0048BA">Absolute Zero</option>
-            <option value="#B0BF1A">Acid green</option>
-            <option value="#7CB9E8">Aero</option>
-            <option value="#C0E8D5">Aero blue</option>
-            <option value="#B284BE">African violet</option>
-            <option value="#72A0C1">Air superiority blue</option>
-            <option value="#EDEAE0">Alabaster</option>
-            <option value="#EFDECD">Almond</option>
-            <option value="#E52B50">Amaranth</option>
-            <option value="#3B7A57">Amazon</option>
-            <option value="#FFBF00">Amber</option>
-            <option value="#FF7E00">Amber (SAE/ECE)</option>
-            <option value="#9966CC">Amethyst</option>
-            <option value="#A4C639">Android green</option>
-            <option value="#CD9575">Antique brass</option>
-            <option value="#665D1E">Antique bronze</option>
-            <option value="#915C83">Antique fuchsia</option>
-            <option value="#841B2D">Antique ruby</option>
-            <option value="#BF4F51">Bittersweet shimmer</option>
-            <option value="#000000" selected>Black</option>
-            <option value="#1B1811">Black chocolate</option>
-            <option value="#3B2F2F">Black coffee</option>
-            <option value="#54626F">Black coral</option>
-            <option value="#3B3C36">Black olive</option>
-            <option value="#BFAFB2">Black Shadows</option>
-            <option value="#FFEBCD">Blanched almond</option>
-            <option value="#A57164">Blast-off bronze</option>
-            <option value="#DE5D83">Blush</option>
-            <option value="#79443B">Bole</option>
-            <option value="#E3DAC9">Bone</option>
-            <option value="#006A4E">Bottle green</option>
-            <option value="#87413F">Brandy</option>
-            <option value="#CB4154">Brick red</option>
-            <option value="#66FF00">Bright green</option>
-            <option value="#D891EF">Bright lilac</option>
-            <option value="#C32148">Bright maroon</option>
-            <option value="#1974D2">Bright navy blue</option>
-            <option value="#FFAA1D">Bright yellow (Crayola)</option>
-            <option value="#FF55A3">Brilliant rose</option>
-            <option value="#FB607F">Brink pink</option>
-            <option value="#004225">British racing green</option>
-            <option value="#CD7F32">Bronze</option>
-            <option value="#88540B">Brown</option>
-            <option value="#AF6E4D">Brown sugar</option>
-            <option value="#7BB661">Bud green</option>
-            <option value="#FFC680">Buff</option>
-            <option value="#800020">Burgundy</option>
-            <option value="#DEB887">Burlywood</option>
-            <option value="#A17A74">Burnished brown</option>
-            <option value="#CC5500">Burnt orange</option>
-            <option value="#E97451">Burnt sienna</option>
-            <option value="#8A3324">Burnt umber</option>
-            <option value="#BD33A4">Byzantine</option>
-            <option value="#702963">Byzantium</option>
-            <option value="#536872">Cadet</option>
-            <option value="#5F9EA0">Cadet blue</option>
-            <option value="#A9B2C3">Cadet blue (Crayola)</option>
-            <option value="#91A3B0">Cadet grey</option>
-            <option value="#006B3C">Cadmium green</option>
-            <option value="#ED872D">Cadmium orange</option>
-            <option value="#E30022">Cadmium red</option>
-          </select>
-        </esl-select>
-        <esl-select class="form-group"
-                    style="display: block"
-                    pin-selected
-                    placeholder="Mood">
-          <label for="mood_field" class="form-label">Select your mood</label>
-          <select esl-select-target
-                  id="mood_field"
-                  name="mood_field"
-                  class="form-control">
-            <option>Happy</option>
-            <option>Tired</option>
-            <option>Bored</option>
-            <option>Depressed</option>
-            <option>Scared</option>
-            <option>Excited</option>
-          </select>
-        </esl-select>
-      </div>
-      <div class="form-group">
-        <button class="btn btn-sec-blue">Submit</button>
-        <button type="reset" class="btn btn-sec-orange">Reset</button>
-      </div>
-    </form>
+  function updateFormInfo(event) {
+    const form = document.querySelector('.form');
+    const info = document.querySelector('.demo-info');
 
-    <div class="demo-info panel panel-info">
-    </div>
-    <script>
-      (function () {
-        var form = document.querySelector('form');
-        var info = document.querySelector('.demo-info');
-        if (!info) return;
+    event.preventDefault();
 
-        function upd() {
-          var data = {};
-          var formData = new FormData(form);
-          formData.forEach(function (value, key) {
-            if (key in data) {
-              data[key] = [].concat(data[key]).concat(value);
-            } else {
-              data[key] = value;
-            }
-          });
+    const data = {};
+    const formData = new FormData(form);
 
-          info.textContent = JSON.stringify(data, null, 2);
-          info.removeAttribute('hidden');
-        }
+    formData.forEach((value, key) => {
+      if (data[key]) {
+        data[key] = [].concat(data[key], value);
+      } else {
+        data[key] = value;
+      }
+    });
+
+    info.textContent = JSON.stringify(data, null, 2);
+    info.removeAttribute('hidden');
+  }
+
+  document.addEventListener('submit', updateFormInfo);
+   </script>
 
-        form.addEventListener('submit', upd);
-      })();
-    </script>
+      <uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
+      <uip-preview></uip-preview>
+      <uip-settings target="esl-select" label="Settings" resizable vertical="@+sm">
+        <uip-bool-setting label="Pin-selected" attribute="pin-selected"></uip-bool-setting>
+        <uip-bool-setting label="Multiple" attribute="multiple" target="select"></uip-bool-setting>
+        <uip-bool-setting label="Disabled" attribute="disabled" target=".disabled"></uip-bool-setting>
+      </uip-settings>
+      <uip-editor label="Source code (HTML)" collapsible copy></uip-editor>
+      <uip-editor source="js" label="Source code (JS)" collapsible collapsed copy></uip-editor>
+    </uip-root>
   </div>
 </section>