@ulu/frontend/lib/scss/components/_input-group.demo.html

A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op

<!-- @ulu-demo
  title: Search Input (Joined)
  description: A search bar where the input and button are visually connected with shared borders.
-->
<div class="form-theme">
  <div class="input-group input-group--joined">
    <div class="input-group__item input-group__item--field">
      <input type="text" class="input-group__input" placeholder="Search...">
    </div>
    <div class="input-group__item">
      <button class="button input-group__button">Search</button>
    </div>
  </div>
</div>

<!-- @ulu-demo
  title: Input with Currency Cue
  description: Using a cue item to provide context, like a currency symbol.
-->
<div class="form-theme">
  <div class="input-group input-group--joined">
    <div class="input-group__item input-group__item--cue">$</div>
    <div class="input-group__item input-group__item--field">
      <input type="number" class="input-group__input" placeholder="0.00">
    </div>
  </div>
</div>

<!-- @ulu-demo
  title: Gapped Layout
  description: The default layout with a small gap between the input and the action button.
-->
<div class="form-theme">
  <div class="input-group">
    <div class="input-group__item input-group__item--field">
      <input type="text" class="input-group__input" placeholder="Enter coupon code">
    </div>
    <div class="input-group__item">
      <button class="button button--outline input-group__button">Apply</button>
    </div>
  </div>
</div>