Input Groups

Base

An input group will always display as an input group at all breakpoints.

<div class="input-group margin--off">
    <div class="input-group--input">
        <input type="search" class="input" placeholder="Search..." />
    </div>
    <div class="input-group--action">
        <button type="button" class="button button--primary-color button--block">Search</button>
    </div>
</div>

Breakpoints

Inputs and buttons will become input groups at the starting at the breakpoints below.

XXS & Up

<div class="input-group--xxs margin--off--xxs">
    <div class="input-group--input">
        <input type="search" class="input" placeholder="Search..." />
    </div>
    <div class="input-group--action">
        <button type="button" class="button button--primary-color button--block--xxs">Search</button>
    </div>
</div>

XS & Up

<div class="input-group--xs margin--off--xs">
    <div class="input-group--input">
        <input type="search" class="input" placeholder="Search..." />
    </div>
    <div class="input-group--action">
        <button type="button" class="button button--primary-color button--block--xs">Search</button>
    </div>
</div>

SM & Up

<div class="input-group--sm margin--off--sm">
    <div class="input-group--input">
        <input type="search" class="input" placeholder="Search..." />
    </div>
    <div class="input-group--action">
        <button type="button" class="button button--primary-color button--block--sm">Search</button>
    </div>
</div>

MD & Up

<div class="input-group--md margin--off--md">
    <div class="input-group--input">
        <input type="search" class="input" placeholder="Search..." />
    </div>
    <div class="input-group--action">
        <button type="button" class="button button--primary-color button--block--md">Search</button>
    </div>
</div>

LG & Up

<div class="input-group--lg margin--off--lg">
    <div class="input-group--input">
        <input type="search" class="input" placeholder="Search..." />
    </div>
    <div class="input-group--action">
        <button type="button" class="button button--primary-color button--block--lg">Search</button>
    </div>
</div>

XL & Up

<div class="input-group--xl margin--off--xl">
    <div class="input-group--input">
        <input type="search" class="input" placeholder="Search..." />
    </div>
    <div class="input-group--action">
        <button type="button" class="button button--primary-color button--block--xl">Search</button>
    </div>
</div>

XXL & Up

<div class="input-group--xxl margin--off--xxl">
    <div class="input-group--input">
        <input type="search" class="input" placeholder="Search..." />
    </div>
    <div class="input-group--action">
        <button type="button" class="button button--primary-color button--block--xxl">Search</button>
    </div>
</div>

Icons

Left

$

<div class="input-group margin--off">
    <div class="input-group--action input-group--action-icon">
        <span class="input-group--icon">$</span>
    </div>
    <div class="input-group--input">
        <input type="text" class="input" placeholder="Amount" />
    </div>
</div>

Right

Lbs.

<div class="input-group margin--off">
    <div class="input-group--input">
        <input type="text" class="input" placeholder="Weight" />
    </div>
    <div class="input-group--action input-group--action-icon">
        <span class="input-group--icon">Lbs.</span>
    </div>
</div>