title: select element with multiple checkboxes
body: <p><img src="https://i.stack.imgur.com/pBL0P.png" alt="enter image description here"></p>
  
  <p>Gmail has the feature where you can select labels using checkboxes and it is hidden inside a div element where you can scroll up and down.</p>
  
  <p>It also allows you to have customized actions like create new label at the bottom.</p>
  
  <p>It also allows you to do filtering at the top with a simple search bar.</p>
  
  <p>What is the simplest way to implement something like that and allow me to put in customized actions like the Create new label at the bottom?</p>
  
  <p>At the barest minimum have a way to display all the checkboxes in a scrollable div or select element.</p>
  
  <p>UPDATE:</p>
  
  <p>Currently, I have only the following checkboxes</p>
  
  <pre><code>&lt;div class="input select"&gt;
      &lt;label for="SiteSite"&gt;Sites&lt;/label&gt;
      &lt;input type="hidden" name="data[Site][Site]" value="" id="SiteSite"&gt;
  
  &lt;div class="checkbox"&gt;&lt;input type="checkbox" name="data[Site][Site][]" value="1" id="SiteSite1"&gt;&lt;label for="SiteSite1"&gt;ODSite:P11379-440YishunAve11 HWSW_ESTA ENO21.000070.10001 92640145&lt;/label&gt;&lt;/div&gt;
  &lt;div class="checkbox"&gt;&lt;input type="checkbox" name="data[Site][Site][]" value="2" id="SiteSite2"&gt;&lt;label for="SiteSite2"&gt;ODSite:P11374-SGRecClub HWSW_ESTA ENO21.000070.10002 92640147&lt;/label&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>