causeway-standard-theme/causeway/docs/components/form-fields/select-input.html

<div class="container page">
  <div class="content pane single-pane">
    <section>
      <a id="forms-select"></a>
      <header class="content-header">
        <h1 class="title">
          Select
        </h1>
        <ul class="nav nav-pills">
          <li>
            <a href="#forms-select-single">
              Single Choice
            </a>
          </li>
          <li>
            <a href="#forms-select-multiple">
              Multiple Choice
            </a>
          </li>
        </ul>
      </header>
    </section>
    <section>
      <a id="forms-select-single"></a>
      <header class="content-header">
        <h3 class="title">
          Single Choice
        </h3>
      </header>
      <p>
        Single select controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the
        <code>&lt;select&gt;</code> tag, and classes should follow on from the surrounding <code>&lt;div&gt;</code>.
      </p>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>
              Style
            </th>
            <th>
              Attribute
            </th>
            <th>
              Value
            </th>
            <th>
              Standard Example
            </th>
            <th>
              Inline Example
            </th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="5">
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>
              Standard
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group">
                    <label for="select-field1a" class="control-label">Text:</label>

                    <div class="control-input select">
                      <select class="form-control" id="select-field1a" name="select_field1a">
                        <option value="">Please select one</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group">
                    <label class="sr-only control-label" for="inline-select-field1a">Text:</label>

                    <div class="control-input select">
                      <select class="form-control" id="inline-select-field1a" name="inline_select_field1a">
                        <option value="">Please select one</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
          <tr>
            <td>
              Disabled
            </td>
            <td>
              class
              <br/><br/>
              disabled
            </td>
            <td>
              disabled
              <br/><br/>
              disabled
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group disabled">
                    <label for="select-field1b" class="control-label">Text:</label>

                    <div class="control-input select">
                      <select disabled="disabled" class="form-control" id="select-field1b" name="select_field1b">
                        <option value="">Please select one</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group disabled">
                    <label class="sr-only control-label" for="inline-select-field1b">Text:</label>

                    <div class="control-input select">
                      <select disabled="disabled" class="form-control" id="inline-select-field1b" name="inline_select_field1b">
                        <option value="">Please select one</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
          <tr>
            <td>
              Invalid
            </td>
            <td>
              class
            </td>
            <td>
              invalid
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group invalid">
                    <label for="select-field1c" class="control-label">Text:</label>

                    <div class="control-input select">
                      <select class="form-control" id="select-field1c" name="select_field1c">
                        <option value="">Please select one</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group invalid">
                    <label class="sr-only control-label" for="inline-select-field1c">Text:</label>

                    <div class="control-input select">
                      <select class="form-control" id="inline-select-field1c" name="inline_select_field1c">
                        <option value="">Please select one</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
        </tbody>
      </table>

      <pre>
        <code>
          &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;&lt;!-- Select control ID goes here --&gt;&quot;&gt;&lt;!-- Label text goes here --&gt;:&lt;/label&gt;
          &lt;select class=&quot;form-control selectpicker&quot; id=&quot;&lt;!-- Select control ID goes here --&gt;&quot; name=&quot;&lt;!-- Select control name goes here --&gt;&quot;&gt;
          &lt;option value=&quot;&quot;&gt;Please select one&lt;/option&gt;
          &lt;option value=&quot;&lt;!-- Option value goes here --&gt;&quot;&gt;&lt;!-- Option label goes here --&gt;&lt;/option&gt;
          &lt;option selected=&quot;selected&quot; value=&quot;&lt;!-- Input control ID goes here --&gt;&quot;&gt;&lt;!-- Input control ID goes here --&gt;&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
        </code>
      </pre>
    </section>
    <section>
      <a id="forms-select-multiple"></a>
      <header class="content-header">
        <h3 class="title">
          Multiple Choice
        </h3>
      </header>
      <p>
        Multiple choice controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the
        <code>&lt;select&gt;</code> tag, and classes should follow on from the surrounding <code>&lt;div&gt;</code>.
      </p>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>
              Style
            </th>
            <th>
              Attribute
            </th>
            <th>
              Value
            </th>
            <th>
              Standard Example
            </th>
            <th>
              Inline Example
            </th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="5">
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>
              Standard
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group">
                    <label class="control-label" for="multiselect-field1a">Text:</label>

                    <div class="control-input select">
                      <select multiple="multiple" class="form-control" id="multiselect-field1a" name="multiselect_field1a" data-width="auto">
                        <option value="">Nothing Selected</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group">
                    <label class="sr-only" for="inline-multiselect-field1a" class="control-label">Text:</label>

                    <div class="control-input select">
                      <select multiple="multiple" class="form-control" id="inline-multiselect-field1a" name="inline_multiselect_field1a">
                        <option value="">Nothing Selected</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
          <tr>
            <td>
              Disabled
            </td>
            <td>
              class
              <br/><br/>
              disabled
            </td>
            <td>
              disabled
              <br/><br/>
              disabled
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group disabled">
                    <label for="multiselect-field1b" class="control-label">Text:</label>

                    <div class="control-input select multiple">
                      <select disabled="disabled" multiple="multiple" class="form-control" id="multiselect-field1b" name="multiselect_field1b">
                        <option value="">Nothing Selected</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group disabled">
                    <label class="sr-only control-label" for="inline-multiselect-field1b">Text:</label>

                    <div class="control-input select multiple">
                      <select disabled="disabled" multiple="multiple" class="form-control" id="inline-multiselect-field1b" name="inline_multiselect_field1b">
                        <option value="">Nothing Selected</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
          <tr>
            <td>
              Invalid
            </td>
            <td>
              class
            </td>
            <td>
              invalid
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group invalid">
                    <label for="multiselect-field1c" class="control-label">Text:</label>

                    <div class="control-input select">
                      <select multiple="multiple" class="form-control" id="multiselect-field1c" name="multiselect_field1c">
                        <option value="">Nothing Selected</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group invalid">
                    <label class="sr-only control-label" for="inline-multiselect-field1c">Text:</label>

                    <div class="control-input select">
                      <select multiple="multiple" class="form-control" id="inline-multiselect-field1c" name="inline_multiselect_field1c">
                        <option value="">Nothing Selected</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                        <option value="option5">Option 5</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
        </tbody>
      </table>

      <pre>
        <code>
          &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;&lt;!-- Select control ID goes here --&gt;&quot;&gt;&lt;!-- Label text goes here --&gt;:&lt;/label&gt;
          &lt;select multiple="multiple" class=&quot;form-control selectpicker&quot; id=&quot;&lt;!-- Select control ID goes here --&gt;&quot; name=&quot;&lt;!-- Select control name goes here --&gt;&quot;&gt;
          &lt;option value=&quot;&quot;&gt;Please select one&lt;/option&gt;
          &lt;option value=&quot;&lt;!-- Option value goes here --&gt;&quot;&gt;&lt;!-- Option label goes here --&gt;&lt;/option&gt;
          &lt;option selected=&quot;selected&quot; value=&quot;&lt;!-- Input control ID goes here --&gt;&quot;&gt;&lt;!-- Input control ID goes here --&gt;&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
        </code>
      </pre>
      <br/>
<h1 class="title">Advanced Dropdown Select</h1>
      <form class="form-horizontal" action="">
        <div class="form-row">
          <h3 class="title">Example:</h3>
          <div class="form-group advanced-select">
            <label class="control-label" for="advancedDropdown">Advanced Dropdown Select:</label>
            <div class="control-input">
              <select name="" id="advancedDropdown" class="selectpicker" data-live-search="true" dropup-auto="false">
                <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>

          <h3 class="title">Code:</h3>
          <pre><code>
          &lt;div class=&quot;form-group advanced-select&quot;&gt;
            &lt;label class=&quot;control-label&quot; for=&quot;advancedDropdown&quot;&gt;Advanced Dropdown Select:&lt;/label&gt;
            &lt;div class=&quot;control-input&quot;&gt;
              &lt;select name=&quot;&quot; id=&quot;advancedDropdown&quot; class=&quot;selectpicker&quot; data-live-search=&quot;true&quot; dropup-auto=&quot;false&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;
          </code></pre>
        </div>
      </form>
    </section>
  </div>
</div>