UIF Core // Select input group

What the heck happened to the rest of the UIF documentation?

All the CSS-only components have been moved across to the Storybook version of our UIF docs.

The jQuery dependent components are considered legacy, and while still currently available, are not going to be actively developed upon any longer. Also, it's a schlep trying to get jQuery to work within webpack/storybook, so they can stay here.

Please consider using CSS-only components for maximum ongoing happiness. 💖

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