UIF Core // Select input group

Select and input group

Enter the monies

<div class="select-input-group">
  <div class="select-input-group__select">
    <select id="" name="" tabindex="" >
    </select>  </div>
  <div class="select-input-group__input">
    <div class="form-field" data-js="form-field">
      <label for="input-text-example" class="form-field__label"></label>
      <input id="input-text-example" name="input-text-example" class="input-text" type="text" placeholder="Place holder text" >
    </div>
  </div>
</div>

Introduction

Select input groups allow for mutually relevant selects and input fields to be displayed inline together. Takes enhanced select components into account.

Usage

Class name	Effect	Remarks
`.select-input-group`	Placed on the tag that wraps around the `.select-input-group__select` and `.select-input-group__input` elements.	Required.
`.select-input-group__select`	Placed on the element that wraps the `select` tag.	Required.
`.select-input-group__input`	Placed on the element that wraps `.form-field` that contains the `input` tag.	Required.
JavaScript events	Effect	Required
`pfSelect.change`	This event is triggered when the Select Filter's value changes. Bind this to the classes on the `select` element. E.g., `$(document).on("pfSelect.change", ".class-name", function(){...});`	Optional binding in the JS