Input Groups

Attach prefixes, suffixes, icons, or buttons to an input by grouping them in a .lp-input-group. The component seamlessly joins borders and radii so the result looks like a single control.

Text addon (prefix)

Website

https://

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Website</label>
    <div class="lp-input-group">
        <span class="lp-input-addon">https://</span>
        <input type="text" class="lp-input" placeholder="yourdomain.com" />
    </div>
</div>

Text addon (suffix)

Amount

USD

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Amount</label>
    <div class="lp-input-group">
        <input type="number" class="lp-input" placeholder="0.00" />
        <span class="lp-input-addon">USD</span>
    </div>
</div>

Both sides

Domain

https:// .example.com

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Domain</label>
    <div class="lp-input-group">
        <span class="lp-input-addon">https://</span>
        <input type="text" class="lp-input" placeholder="yourapp" />
        <span class="lp-input-addon">.example.com</span>
    </div>
</div>

Icon addon

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Search</label>
    <div class="lp-input-group">
        <span class="lp-input-addon lp-input-addon--icon">
            <span class="material-symbols-outlined" style="font-size:18px;">search</span>
        </span>
        <input type="search" class="lp-input" placeholder="Search anything…" />
    </div>
</div>

Button addon

Share link

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Share link</label>
    <div class="lp-input-group">
        <input type="text" class="lp-input" value="https://launchpad.local/share/abc123" readonly />
        <button type="button" class="lp-btn lp-btn-primary">Copy</button>
    </div>
</div>

Select addon

Phone number

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Phone number</label>
    <div class="lp-input-group">
        <select class="lp-select-native" style="flex:0 0 auto;">
            <option>+1</option>
            <option>+44</option>
            <option>+49</option>
            <option>+91</option>
        </select>
        <input type="tel" class="lp-input" placeholder="(555) 010-0001" />
    </div>
</div>

CSS reference

Class	Purpose
`.lp-input-group`	Flex container that joins an input with one or more addons / buttons
`.lp-input-addon`	Text / icon addon cell on either end of the group
`.lp-input-addon--icon`	Square icon-only variant of an addon