causeway-standard-theme/causeway/docs/components/form-fields/advanced-listbox.html

<div>
  <a id="forms-advanced-listbox"></a>
  <header class="content-header">
    <h1 class="title">
      Advanced Listbox
    </h1>
  </header>
  <form class="form-horizontal">
    <h3 class="title">Multi Select</h3>

    <div class="form-row">
      <div class="form-group advanced-listbox">
        <label for="alb1" class="control-label">Assign Roles: </label>
        <div class="control-input">
          <select name="" id="alb1" class="selectpicker" multiple>
            <option value="Purchase Clerk">Purchase Clerk</option>
            <option value="Sales Clerk">Sales Clerk</option>
            <option value="Cash Book Clerk">Cash Book Clerk</option>
            <option value="Purchase Clerk Info">Purchase Clerk Info</option>
            <option value="Sales Clerk Info">Sales Clerk Info</option>
            <option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
            <option value="Info Cash Two">Info Cash Two</option>
          </select>
        </div>
      </div>
    </div>
    <h3 class="title">Code:</h3>
    <pre><code>
    &lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;form-group advanced-listbox&quot;&gt;
        &lt;label for=&quot;alb1&quot; class=&quot;control-label&quot;&gt;Assign Roles: &lt;/label&gt;

        &lt;div class=&quot;control-input&quot;&gt;
          &lt;select name=&quot;&quot; id=&quot;alb1&quot; class=&quot;selectpicker&quot; multiple&gt;
            &lt;option value=&quot;Purchase Clerk&quot;&gt;Purchase Clerk&lt;/option&gt;
            &lt;option value=&quot;Sales Clerk&quot;&gt;Sales Clerk&lt;/option&gt;
            &lt;option value=&quot;Cash Book Clerk&quot;&gt;Cash Book Clerk&lt;/option&gt;
            &lt;option value=&quot;Purchase Clerk Info&quot;&gt;Purchase Clerk Info&lt;/option&gt;
            &lt;option value=&quot;Sales Clerk Info&quot;&gt;Sales Clerk Info&lt;/option&gt;
            &lt;option value=&quot;Cash Book Clerk Info&quot;&gt;Cash Book Clerk Info&lt;/option&gt;
            &lt;option value=&quot;Info Cash Two&quot;&gt;Info Cash Two&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    </code></pre>
    <br/>
    <h3 class="title">Single Select</h3>

    <div class="form-row">
      <div class="form-group advanced-listbox">
        <label for="alb2" class="control-label">Assign Roles: </label>

        <div class="control-input">
          <select name="" id="alb2" class="selectpicker">
            <option value="Purchase Clerk">Purchase Clerk</option>
            <option value="Sales Clerk">Sales Clerk</option>
            <option value="Cash Book Clerk">Cash Book Clerk</option>
            <option value="Purchase Clerk Info">Purchase Clerk Info</option>
            <option value="Sales Clerk Info">Sales Clerk Info</option>
            <option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
            <option value="Info Cash Two">Info Cash Two</option>
          </select>
        </div>
      </div>
    </div>
    <h3 class="title">Code:</h3>
    <pre><code>
    &lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;form-group advanced-listbox&quot;&gt;
        &lt;label for=&quot;alb2&quot; class=&quot;control-label&quot;&gt;Assign Roles: &lt;/label&gt;

        &lt;div class=&quot;control-input&quot;&gt;
          &lt;select name=&quot;&quot; id=&quot;alb2&quot; class=&quot;selectpicker&quot;&gt;
            &lt;option value=&quot;Purchase Clerk&quot;&gt;Purchase Clerk&lt;/option&gt;
            &lt;option value=&quot;Sales Clerk&quot;&gt;Sales Clerk&lt;/option&gt;
            &lt;option value=&quot;Cash Book Clerk&quot;&gt;Cash Book Clerk&lt;/option&gt;
            &lt;option value=&quot;Purchase Clerk Info&quot;&gt;Purchase Clerk Info&lt;/option&gt;
            &lt;option value=&quot;Sales Clerk Info&quot;&gt;Sales Clerk Info&lt;/option&gt;
            &lt;option value=&quot;Cash Book Clerk Info&quot;&gt;Cash Book Clerk Info&lt;/option&gt;
            &lt;option value=&quot;Info Cash Two&quot;&gt;Info Cash Two&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    </code></pre>
    <br/>
    <h3 class="title">Disabled</h3>

    <div class="form-row">
      <div class="form-group advanced-listbox">
        <label for="alb3" class="control-label">Assign Roles: </label>

        <div class="control-input">
          <select name="" id="alb3" class="selectpicker" disabled>
            <option value="Purchase Clerk">Purchase Clerk</option>
            <option value="Sales Clerk">Sales Clerk</option>
            <option value="Cash Book Clerk">Cash Book Clerk</option>
            <option value="Purchase Clerk Info">Purchase Clerk Info</option>
            <option value="Sales Clerk Info">Sales Clerk Info</option>
            <option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
            <option value="Info Cash Two">Info Cash Two</option>
          </select>
        </div>
      </div>
    </div>
    <h3 class="title">Code:</h3>
    <pre><code>
    &lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;form-group advanced-listbox&quot;&gt;
        &lt;label for=&quot;alb3&quot; class=&quot;control-label&quot;&gt;Assign Roles: &lt;/label&gt;

        &lt;div class=&quot;control-input&quot;&gt;
          &lt;select name=&quot;&quot; id=&quot;alb3&quot; class=&quot;selectpicker&quot; disabled&gt;
            &lt;option value=&quot;Purchase Clerk&quot;&gt;Purchase Clerk&lt;/option&gt;
            &lt;option value=&quot;Sales Clerk&quot;&gt;Sales Clerk&lt;/option&gt;
            &lt;option value=&quot;Cash Book Clerk&quot;&gt;Cash Book Clerk&lt;/option&gt;
            &lt;option value=&quot;Purchase Clerk Info&quot;&gt;Purchase Clerk Info&lt;/option&gt;
            &lt;option value=&quot;Sales Clerk Info&quot;&gt;Sales Clerk Info&lt;/option&gt;
            &lt;option value=&quot;Cash Book Clerk Info&quot;&gt;Cash Book Clerk Info&lt;/option&gt;
            &lt;option value=&quot;Info Cash Two&quot;&gt;Info Cash Two&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    </code></pre>
    <br/>

    <h3 class="title">Error</h3>

    <div class="form-row">
      <div class="form-group advanced-listbox invalid error-hover">
        <label for="alb4" class="control-label">Assign Roles: </label>

        <div class="control-input">
          <select name="" id="alb4" class="selectpicker">
            <option value="Purchase Clerk">Purchase Clerk</option>
            <option value="Sales Clerk">Sales Clerk</option>
            <option value="Cash Book Clerk">Cash Book Clerk</option>
            <option value="Purchase Clerk Info">Purchase Clerk Info</option>
            <option value="Sales Clerk Info">Sales Clerk Info</option>
            <option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
            <option value="Info Cash Two">Info Cash Two</option>
          </select>
          <span class="error-message" data-original-title="" title="">Error Message</span>
        </div>
      </div>
    </div>
    <h3 class="title">Code:</h3>
    <pre><code>
    &lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;form-group advanced-listbox invalid error-hover&quot;&gt;
        &lt;label for=&quot;alb4&quot; class=&quot;control-label&quot;&gt;Assign Roles: &lt;/label&gt;

        &lt;div class=&quot;control-input&quot;&gt;
          &lt;select name=&quot;&quot; id=&quot;alb4&quot; class=&quot;selectpicker&quot;&gt;
            &lt;option value=&quot;Purchase Clerk&quot;&gt;Purchase Clerk&lt;/option&gt;
            &lt;option value=&quot;Sales Clerk&quot;&gt;Sales Clerk&lt;/option&gt;
            &lt;option value=&quot;Cash Book Clerk&quot;&gt;Cash Book Clerk&lt;/option&gt;
            &lt;option value=&quot;Purchase Clerk Info&quot;&gt;Purchase Clerk Info&lt;/option&gt;
            &lt;option value=&quot;Sales Clerk Info&quot;&gt;Sales Clerk Info&lt;/option&gt;
            &lt;option value=&quot;Cash Book Clerk Info&quot;&gt;Cash Book Clerk Info&lt;/option&gt;
            &lt;option value=&quot;Info Cash Two&quot;&gt;Info Cash Two&lt;/option&gt;
          &lt;/select&gt;
          &lt;span class=&quot;error-message&quot; data-original-title=&quot;&quot; title=&quot;&quot;&gt;Error Message&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    </code></pre>
  </form>
</div>