Forms: Input Groups

Text addon (prefix)

Website

https://

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

Text addon (suffix)

Amount

USD

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

Both sides

Domain

https:// .example.com

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

Icon addon

Search

search

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

Button addon

Share link

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-label">Share link</label>
    <div class="lp-input-group">
        <input type="text" class="lp-form-control" 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-label">Phone number</label>
    <div class="lp-input-group">
        <select class="lp-form-select" style="flex:0 0 auto;">
            <option>+1</option>
            <option>+44</option>
            <option>+49</option>
            <option>+91</option>
        </select>
        <input type="tel" class="lp-form-control" placeholder="(555) 010-0001" />
    </div>
</div>

Small Input Group

Search (small)

search

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-label">Search (small)</label>
    <div class="lp-input-group lp-input-group-sm">
        <span class="lp-input-group-text">
            <span class="material-symbols-rounded" style="font-size:16px;">search</span>
        </span>
        <input type="search" class="lp-form-control" placeholder="Search…" />
    </div>
</div>

Large Input Group

Domain (large)

https://

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-label">Domain (large)</label>
    <div class="lp-input-group lp-input-group-lg">
        <span class="lp-input-group-text">https://</span>
        <input type="text" class="lp-form-control" placeholder="yourdomain.com" />
    </div>
</div>

CSS reference

Class	Purpose
`.lp-input-group`	Flex container that joins an input with one or more addons / buttons
`.lp-input-group-text`	Text / icon addon cell on either end of the group
`.lp-input-group-text-icon`	Square icon-only variant of an addon
`.lp-input-group-sm`	Small input group (height, font-size, padding)
`.lp-input-group-lg`	Large input group (height, font-size, padding)