{{#extend "layout-docs"}}

  {{#replace "pageTitle"}}Select input group{{/replace}}

  {{#replace "main"}}

    <section id="blocks-input-groups" class="grid--fluid">
      <h2>Select and input group</h2>
      {{#each select-input-group}}
        {{> select-input-group}}
      {{/each}}
      <pre class="code--debug"><code class="language-html">{{> select-input-group-src}}</code></pre>
    </section>

    <section id="blocks-input-groups-documentation" class="grid--fluid">
      <h3>Introduction</h3>
      <p>
        Select input groups allow for mutually relevant selects and input fields to be displayed inline together. Takes enhanced select components into account.
      </p>
      <h3>Usage</h3>
      <table class="table--debug">
        <tr>
          <th>Class name</th>
          <th>Effect</th>
          <th>Remarks</th>
        </tr>
        <tr>
          <td><code>.select-input-group</code></td>
          <td>
            Placed on the tag that wraps around the <code>.select-input-group__select</code> and <code>.select-input-group__input</code> elements.
          </td>
          <td>Required.</td>
        </tr>
        <tr>
          <td><code>.select-input-group__select</code></td>
          <td>Placed on the element that wraps the <code>select</code> tag.</td>
          <td>Required.</td>
        </tr>
        <tr>
          <td><code>.select-input-group__input</code></td>
          <td>Placed on the element that wraps <code>.form-field</code> that contains the <code>input</code> tag.</td>
          <td>Required.</td>
        </tr>
        <tr>
          <th>JavaScript events</th>
          <th>Effect</th>
          <th>Required</th>
        </tr>
        <tr>
          <td><code>pfSelect.change</code></td>
          <td>
            This event is triggered when the Select Filter's value changes. Bind this to the classes on the <code>select</code> element. E.g., <br>
            <code class="language-js">$(document).on("pfSelect.change", ".class-name", function(){...});</code>
          </td>
          <td>Optional binding in the JS</td>
        </tr>
      </table>
    </section>

  {{/replace}}

{{/extend}}