Input Group

A layout component for grouping form inputs with adjacent actions or information, such as search buttons or currency symbols.

Standard Search (Joined)

The classic search layout with an appended button and shared borders.

<div class="form-theme">
  <div class="input-group input-group--joined">
    <div class="input-group__item input-group__item--field">
      <label for="search-input" class="hidden-visually">Search</label>
      <input
        type="text"
        id="search-input"
        class="input-group__input"
        placeholder="Search the site...">
    </div>
    <div class="input-group__item">
      <button
        class="button button--primary input-group__button"
        aria-label="Submit Search">
        <span class="button__icon fas fa-magnifying-glass" aria-hidden="true"></span>
      </button>
    </div>
  </div>
</div>

Newsletter Signup (Joined)

An input group using a text-based button.

Email Address

<div class="form-theme" style="max-width: 400px;">
  <div class="input-group input-group--joined">
    <div class="input-group__item input-group__item--field">
      <label for="newsletter-email" class="hidden-visually">Email Address</label>
      <input
        type="email"
        id="newsletter-email"
        class="input-group__input"
        placeholder="your@email.com">
    </div>
    <div class="input-group__item">
      <button class="button button--primary input-group__button">Subscribe</button>
    </div>
  </div>
</div>

Input Cue (Currency/Suffix)

Using .input-group__item--cue for non-interactive information prefixes or suffixes.

Price

Domain

@example.com

<div class="form-theme" style="max-width: 400px;">
  <div class="input-group input-group--joined margin-bottom">
    <div class="input-group__item input-group__item--cue">$</div>
    <div class="input-group__item input-group__item--field">
      <label for="price-input" class="hidden-visually">Price</label>
      <input type="number" id="price-input" class="input-group__input" placeholder="0.00">
    </div>
  </div>

  <div class="input-group input-group--joined">
    <div class="input-group__item input-group__item--field">
      <label for="domain-input" class="hidden-visually">Domain</label>
      <input type="text" id="domain-input" class="input-group__input" placeholder="username">
    </div>
    <div class="input-group__item input-group__item--cue">@example.com</div>
  </div>
</div>

Gapped Layout

When the items should be aligned but maintain their own distinct shapes (using default gap: 0.5em).

Promo Code

<div class="form-theme" style="max-width: 400px;">
  <div class="input-group">
    <div class="input-group__item input-group__item--field">
      <label for="promo-input" class="hidden-visually">Promo Code</label>
      <input type="text" id="promo-input" class="input-group__input" placeholder="Enter code">
    </div>
    <div class="input-group__item">
      <button class="button button--outline input-group__button">Apply</button>
    </div>
  </div>
</div>

Quantity Picker (Flanked)

An input group with actions on both sides. This demonstrates the component's ability to shrink correctly within tight containers.

<div class="form-theme">
  <div class="input-group input-group--joined" style="max-width: 300px;">
    <div class="input-group__item">
      <button class="button button--outline input-group__button" aria-label="Decrease quantity">
        <span class="button__icon fas fa-minus" aria-hidden="true"></span>
      </button>
    </div>
    <div class="input-group__item input-group__item--field">
      <input type="number" value="1" class="input-group__input type-center">
    </div>
    <div class="input-group__item">
      <button class="button button--outline input-group__button" aria-label="Increase quantity">
        <span class="button__icon fas fa-plus" aria-hidden="true"></span>
      </button>
    </div>
  </div>
</div>