Form Input Component

<div class="spr-stack-container-md">
  <div class="spr-form-input-container">
    <input class="spr-form-input" placeholder="Content">
  </div>
  <div class="spr-form-input-container">
    <input class="spr-form-input error" placeholder="Content">
  </div>
  <div class="spr-form-input-container">
    <input class="spr-form-input" disabled="disabled" placeholder="Content">
  </div>
  <div class="spr-form-input-container">
    <input class="spr-form-input error" disabled="disabled" placeholder="Content">
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label" for="labeled-input">Label</label>
    <input class="spr-form-input" id="labeled-input" placeholder="Content">
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label" for="labeled-input">Label</label>
    <input class="spr-form-input" id="labeled-input" placeholder="Content">
    <div class="spr-form-input-helper-text">Helper text goes here.</div>
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label error" for="labeled-input">Label</label>
    <input class="spr-form-input error" id="labeled-input" placeholder="Content">
    <div class="spr-form-input-helper-text spr-helper-text-error">Helper text goes here.</div>
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label" for="labeled-input">Label</label>
    <input class="spr-form-input" disabled="disabled" id="labeled-input" placeholder="Content">
    <div class="spr-form-input-helper-text disabled">Helper text goes here.</div>
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label disabled" for="labeled-input">Label</label>
    <input class="spr-form-input" id="labeled-input" disabled="disabled" placeholder="Content">
    <div class="spr-form-input-helper-text disabled">Helper text goes here.</div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input spr-select">
      <div style="display:flex;flex-direction:row;justify-content:space-between;">
        <div>Sprout</div>
        <i class="spr-icon spr-icon-carat-down"></i>
      </div>
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input spr-select error">
      <div style="display:flex;flex-direction:row;justify-content:space-between;">
        <div>Sprout</div>
        <i class="spr-icon spr-icon-carat-down error"></i>
      </div>
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input spr-select disabled">
      <div style="display:flex;flex-direction:row;justify-content:space-between;">
        <div>Sprout</div>
        <i class="spr-icon spr-icon-carat-down"></i>
      </div>
    </div>
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label" for="labeled-input">Label</label>
    <div class="spr-form-input spr-select">
      <div style="display:flex;flex-direction:row;justify-content:space-between;">
        <div>Sprout</div>
        <i class="spr-icon spr-icon-carat-down"></i>
      </div>
    </div>
    <div class="spr-form-input-helper-text">Helper text goes here.</div>
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label" for="labeled-input">Label</label>
    <div class="spr-form-input spr-select">
      <div style="display:flex;flex-direction:row;justify-content:space-between;">
        <div>Sprout</div>
        <i class="spr-icon spr-icon-carat-down"></i>
      </div>
    </div>
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label" for="labeled-input">Label</label>
    <div class="spr-form-input spr-select focus">
      <div style="display:flex;flex-direction:row;justify-content:space-between;">
        <div>Sprout</div>
        <i class="spr-icon spr-icon-carat-down"></i>
      </div>
    </div>
    <div class="spr-popover-container">
      <div class="spr-popover">
        <div class="spr-select-menu">
          <div class="spr-select-option selected">Selected Option</div>
          <div class="spr-select-option">Not Selected Option</div>
          <div class="spr-select-option disabled">Disabled Option</div>
        </div>
      </div>
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input-icon-wrap">
      <i class="spr-icon spr-icon-check spr-form-input-leading-icon"></i>
      <input class="spr-form-input with-leading-icon" id="labeled-input" placeholder="Content">
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input-icon-wrap">
      <i class="spr-icon spr-icon-visibility-on spr-form-input-trailing-icon"></i>
      <input class="spr-form-input with-trailing-icon" id="labeled-input" placeholder="Content">
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input-icon-wrap">
      <i class="spr-icon spr-icon-check spr-form-input-leading-icon"></i>
      <i class="spr-icon spr-icon-visibility-on spr-form-input-trailing-icon"></i>
      <input class="spr-form-input with-leading-icon with-trailing-icon" id="labeled-input" placeholder="Content">
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input-icon-wrap">
      <i class="spr-icon spr-icon-visibility-on spr-form-input-trailing-icon error"></i>
      <input class="spr-form-input with-trailing-icon error" id="labeled-input" placeholder="Content">
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input-icon-wrap">
      <i class="spr-icon spr-icon-visibility-on spr-form-input-trailing-icon disabled"></i>
      <input class="spr-form-input with-trailing-icon" disabled id="labeled-input" placeholder="Content">
    </div>
  </div>
</div>

@import 'components/form-input';